Bootstrap浏览器/移动设备

Bootstrap 支持多种浏览器和设备，包括最新的 Chrome、Firefox、Safari、Microsoft Edge 等主流浏览器，以及一些较旧的浏览器如 Internet Explorer。同时，Bootstrap 也兼容各种设备，如桌面电脑、平板电脑和手机等。

一、支持的浏览器

Bootstrap 支持所有主流浏览器和平台的 最新、稳定版本。在 Windows 上支持 Internet Explorer 10-11 / Microsoft Edge 浏览器。

对于其它使用了最新版本的 WebKit、Blink 或 Gecko 内核的浏览器，或者直接或间接调用了平台的 web view API，都不是明确被支持的。但是，Bootstrap 应该（大多数情况下）在这些浏览器中是能够正常显示和运行的。下面列出了更具体地支持情况。

可以在 .browserslistrc 文件 中找到 Bootstrap 所支持地浏览器及版本列表：

# https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

二、移动设备

一般来说，Bootstrap 支持每个主要平台上的默认浏览器的最新版本。但是基于代理（proxy）模式的浏览器（例如 Opera Mini、Opera Mobile’s Turbo mode、UC Browser Mini、Amazon Silk，这些浏览器自身并不具备完整的页面渲染能力）是不被支持的。

三、桌面浏览器

Bootstrap 支持大多数桌面浏览器，具体如下表：

对于 Firefox 浏览器，除了最新的常规稳定版本外，还支持最新的 Extended Support Release (ESR) 版本。

虽然 Bootstrap 在 Chromium、Linux 版 Chrome、Linux 版 Firefox 以及 Internet Explorer 9 上也表现地很不错，但这些浏览器或版本是不被 Bootstrap 官方支持的。

四、IE 浏览器

Bootstrap 支持 Internet Explorer 10 及更新版本，但不支持 IE9 及更低版本。

某些 CSS3 属性和 HTML5 元素在 IE10 中没有完整的实现，或者要使用某些带前缀的属性才能具有全部功能。如果需要支持 IE8-9，建议使用 Bootstrap v3 版本。

五、移动设备

1、溢出和滚动

在 iOS 和 Android 中，对模态元素的滚动支持有限。为了解决这个问题，您可以使用 CSS 的 overflow: hidden; 属性来隐藏滚动条，并使用 JavaScript 来监听滚动事件，以便在滚动到模态顶部或底部时执行相应的操作。

2、iOS 文本字段和滚动

从 iOS 9.2 开始，当模式处于打开状态时，如果滚动手势的初始触摸在文本或 的边界内，则将滚动模式下方的内容，而不是模式本身。

3、导航栏下拉列表

由于 z 索引的复杂性，该元素不会在 iOS 的导航中使用。因此，要关闭导航栏中的下拉列表，必须直接单击下拉列表元素（或任何其他将在 iOS 中触发单击事件的元素）。

六、浏览器缩放

页面缩放在某些组件中确实可能导致渲染伪影，无论是在 Bootstrap 还是 Web 的其他部分。虽然我们可以尝试修复这些问题（例如搜索并打开相关的问题），但出于性能和实用性的考虑，我们更倾向于忽略这些伪影。然而，除了黑客的解决方案之外，它们通常没有直接的解决方案。

七、移动设备粘性

即使在大多数触摸屏上，真正的悬停不可能实现，大多数移动浏览器模仿停县并使得:hover“有粘性”。换句话说，在触击一个元素之后，:hover样式样式开始应用，在用户触击另一个元素之后停止应用。在移动优先的网站上，这种表现通常是不可取的。

Bootstrap包含了针对它的一个变通，虽然它默认是不可用的。从Sass编译时只要把$use-hover-media-query设置为true，为了浏览器中禁用用以模拟悬停的:hover样式，Bootstrap将使用mq4-hover-shim，它能防止粘性的:hover样式。

八、印刷

从 Safari v8.0 开始，使用固定宽度类可能会导致 Safari 在打印时使用异常小的字体大小。以下方法可能会解决这个问题：

@media print {
.container {
width: auto;
}
}

九、安卓内置浏览器

除了盒子，Android 4.1（以及更新的版本）使用Browser应用作为默认浏览器（而不是用Chrome）。很不幸的是，该Browser应用有很多的bug以及CSS不一致。

选项菜单：

在<select>元素中，如果不应用border-radius以及border，安卓内置浏览器不会显示边缘控件。使用下面的代码片段可以在安卓内置浏览器中移除这个CSS冲突，并把该<select>渲染成未样式化的元素。该用户代理嗅觉探避免了与干扰Chrome、Safari 和 Mozilla 浏览器。

<script>
$(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>

十、验证者

为了在老版本的浏览器上提供尽可能良好的体验，Bootstrap在多个地方使用了CSS浏览器hacks。这些hacks针对特定的浏览器版本，旨在克服浏览器本身存在的bug。然而，这些hacks自然会导致CSS验证器产生不可用的警告。此外，在一些地方，Bootstrap也使用了尚未完全标准化的前沿CSS特征，但纯粹是为了实现渐进增强。

在实践中，这些验证器的警告并没有造成实质上的问题。因为我们的CSS的非hacky部分已经充分验证，而且使用到的hacky部分也不会影响非hacky部分的正常功能。因此，这就是我们故意忽视特定的警告的原因。