diff options
Diffstat (limited to 'docs/_includes/getting-started/browser-device-support.html')
| -rw-r--r-- | docs/_includes/getting-started/browser-device-support.html | 25 |
1 files changed, 15 insertions, 10 deletions
diff --git a/docs/_includes/getting-started/browser-device-support.html b/docs/_includes/getting-started/browser-device-support.html index 3e1dd3e66..0c7c1a4a9 100644 --- a/docs/_includes/getting-started/browser-device-support.html +++ b/docs/_includes/getting-started/browser-device-support.html @@ -20,7 +20,7 @@ <tr> <th>Android</th> <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td> - <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td> + <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td> <td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td> <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td> <td class="text-muted">N/A</td> @@ -106,13 +106,16 @@ <h3 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h3> <p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p> + <h3 id="support-ie8-font-face">Internet Explorer 8 and @font-face</h3> + <p>IE8 has some issues with <code>@font-face</code> when combined with <code>:before</code>. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. <a href="https://github.com/twbs/bootstrap/issues/13863">See issue #13863</a> for details.</p> + <h3 id="support-ie-compatibility-modes">IE Compatibility modes</h3> <p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code><meta></code> tag in your pages:</p> {% highlight html %} <meta http-equiv="X-UA-Compatible" content="IE=edge"> {% endhighlight %} <p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p> - <p>This tag is included in all Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p> + <p>This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p> <p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p> <h3 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3> @@ -141,7 +144,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) { } {% endhighlight %} <p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p> - <p>As a heads up, we include this in the Bootstrap docs as an example.</p> + <p>As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.</p> <h3 id="support-safari-percentages">Safari percent rounding</h3> <p>As of Safari v7.0.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p> @@ -155,7 +158,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) { <h4>Overflow and scrolling</h4> <p>Support for <code>overflow: hidden</code> on the <code><body></code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code><body></code> content will begin to scroll.</p> <h4>Virtual keyboards</h4> - <p>Also, note that if you're using inputs in your modal or navbar, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p> + <p>Also, note that if you're using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p> <h4>Navbar Dropdowns</h4> <p>The <code>.dropdown-backdrop</code> element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS).</p> @@ -173,14 +176,16 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) { <h3 id="support-android-stock-browser">Android stock browser</h3> <p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p> <h4>Select menus</h4> - <p>On <code><select></code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. Use the snippet of code below to remove the offending CSS and render the <code><select></code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p> + <p>On <code><select></code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. (See <a href="http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">this StackOverflow question</a> for details.) Use the snippet of code below to remove the offending CSS and render the <code><select></code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p> {% highlight html %} <script> -var nua = navigator.userAgent -var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1) -if (isAndroid) { - $('select.form-control').removeClass('form-control').css('width', '100%') -} +$(function () { + var nua = navigator.userAgent + var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1) + if (isAndroid) { + $('select.form-control').removeClass('form-control').css('width', '100%') + } +}) </script> {% endhighlight %} <p>Want to see an example? <a href="http://jsbin.com/OyaqoDO/2">Check out this JS Bin demo.</a></p> |