Bootstrap 3 не реагирует на таблицы

Я тестирую локальный сайт в своем телефоне (Lumia 920), сайт Bootstrap 3 показывает ОК, но когда я обращаюсь к своему локальному сайту, моя таблица не выглядит отзывчивой. Я даже попытался с образцом кода страницы Bootstrap.

Вот мой код:

<title>Bootstrap 101 Template</title>
 <!-- Latest compiled and minified CSS -->
 
 <!-- Optional theme -->
 
 <!-- jQuery (necessary for Bootstrap JavaScript plugins) -->
 
 <!-- Latest compiled and minified JavaScript -->
 
 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->


<div>
 <div>
 <div>
 <div>
 <table>
 <thead>
 <tr>
 
 <th>
 Extra small devices
 <small>Phones (<768px)</small>
 </th>
 <th>
 Small devices
 <small>Tablets (≥768px)</small>
 </th>
 <th>
 Medium devices
 <small>Desktops (≥992px)</small>
 </th>
 <th>
 Large devices
 <small>Desktops (≥1200px)</small>
 </th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th>Grid behavior</th>
 <td>Horizontal at all times</td>
 <td colspan="3">Collapsed to start, horizontal above breakpoints</td>
 </tr>
 <tr>
 <th>Container width</th>
 <td>None (auto)</td>
 <td>750px</td>
 <td>970px</td>
 <td>1170px</td>
 </tr>
 <tr>
 <th>Class prefix</th>
 <td><code>.col-xs-</code></td>
 <td><code>.col-sm-</code></td>
 <td><code>.col-md-</code></td>
 <td><code>.col-lg-</code></td>
 </tr>
 <tr>
 <th># of columns</th>
 <td colspan="4">12</td>
 </tr>
 <tr>
 <th>Column width</th>
 <td>Auto</td>
 <td>~62px</td>
 <td>~81px</td>
 <td>~97px</td>
 </tr>
 <tr>
 <th>Gutter width</th>
 <td colspan="4">30px (15px on each side of a column)</td>
 </tr>
 <tr>
 <th>Nestable</th>
 <td colspan="4">Yes</td>
 </tr>
 <tr>
 <th>Offsets</th>
 <td colspan="4">Yes</td>
 </tr>
 <tr>
 <th>Column ordering</th>
 <td colspan="4">Yes</td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 <div>
 asd
 </div>
 </div>
</div>

Что я делаю неправильно? Спасибо.

1 ответ

Так как IE10 на WP8 имеет некоторые ошибки в отношении обработки , вам нужно применить WP8 IE10-специфический взлом, указанный в документации Bootstrap:

Добавьте этот CSS:

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

И этот JavaScript:

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
 var msViewportStyle = document.createElement('style');
 msViewportStyle.appendChild(
 document.createTextNode(
 '@-ms-viewport{width:auto!important}'
 )
 );
 document.querySelector('head').appendChild(msViewportStyle)
}

Или вы можете подождать Windows Phone 8.1, где исправлена ​​ошибка.

licensed under cc by-sa 3.0 with attribution.