浏览器与设备调优

学习BootStrap支持的浏览器和设备,包括旧版兼容问题、BUG和问题边界。

支持的浏览器

Bootstrap几乎支持所有主流操作系统上各浏览器的最新稳定版本
针对Windows,则是支持Internet Explorer 10-11 / Microsoft Edge浏览器。

使用最新版本WebKit、Blink或Gecko内核的第三方浏览器(如国产360安全/极速浏览器、搜狗浏览器、QQ浏览器、UCweb浏览器),无论是直接地还是通过Web API接口,虽然BootStrap官方没有针对性的开发支持,但在大多数情况下也都是完美兼容,不会影响视觉呈现和脚本运行。以下提供更具体的支持信息。

你可以找到我们支持的浏览器及其版本的范围在我们package.json:

"browserslist": [
  "last 1 major version",
  ">= 1%",
  "Chrome >= 45",
  "Firefox >= 38",
  "Edge >= 12",
  "Explorer >= 10",
  "iOS >= 9",
  "Safari >= 9",
  "Android >= 4.4",
  "Opera >= 30"
]

移动设备

Bootstrap支持主流移动OS的默认浏览器的最新版本。注意,不支持代理浏览器(如Opera Mini浏览器、 Opera Mobile’s Turbo 模式、 UCweb Mini浏览器、 Amazon Silk浏览器)。

Chrome Firefox Safari Android Browser & WebView内置浏览器 Microsoft Edge
Android安卓 支持 支持 N/A Android v5.0+ 支持 N/A
iOS苹果 支持 支持 支持 N/A N/A
Windows 10 Mobile 支持 支持 支持 支持 支持

桌面浏览器

同样,支持大多数桌面浏览器的最新版本。

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac 支持 支持 N/A N/A 支持 支持
Windows 支持 支持 支持, IE10+ 支持 支持 不支持

对于 Firefox火狐浏览器, 除了最新的普通稳定版本, 我们也支持Firefox浏览器最新的扩展支持版本 (ESR)。.

大多数情况下,在Chromium和Chrome for Linux、Firefox火狐 for Linux和Internet Explorer 9中,Bootstrap应该看起来和运行良好,尽管它们没有得到官方的支持。

针对不同的浏览器,我们有一个BUG墙列出了详尽明细

Internet Explorer(IE)

支持Internet Explorer 10及更高版本,不支持IE9(即使大多兼容,我们依然不推荐)。请注意,IE10中不完全支持某些CSS3属性和HTML5元素,或者需要前缀属性才能实现完整的功能(访问https://caniuse.com网站可以了解不同浏览器对CSS3和HTML5功能的支持)。

如果您需要IE8-9支持,请使用Bootstrap 3 (点此获取),它是我们代码中最稳定的版本,官方不再发布新版,但仍然支持严重错误修复和文档维护。

移动设备的模态框和下拉组件

Overflow溢出和scroll滚动

IOS和安卓设备中,对于<body>元素中使用overflow: hidden;的支持很有限。因此在这两种设备中,当你滚动超过一个模态窗口的顶部或底部,<body>内容也会开始滚动,请参阅Chrome bug #175502 (修复于Chrome v40) 和WebKit bug #153852这两条文献。

iOS文本字段和滚动

从IOS9.2开始,当一个模态启用,如果手势触模在一个<input>文本或<textarea>文本框内,则<body>中的内容将被滚动,而不是模态本身滚动,请参阅WebKit bug #153856

.dropdown-backdrop 在IOS上无法生态(受Z-indexinge属性影响),因此,要关闭导航栏中的下拉列表,必须再次单击下拉元素(或iOS中合法的触发点击事件他元素)。

浏览器缩放

页面缩放会影响一些组件的呈现效果,无论是在Bootstrap还是其它Web构造体验中都有这样的问题,我们会尽量解决它(在没有解决之前,建议用户先行检索网上公开的方法优化)。对于大多数用户,我们建议忽略在缩放下的渲染缺陷,因为除了用hacky方法之外,它们往往没有直接的解决方案。

移动设备上的:hover/:focus 粘性(点选中)状态

:hover:focus一般用来表达选中、点中、悬停状态。
在移动触屏体验中,并不存在真正的悬停状态,移动浏览器厂商模仿悬停使:hover具备一定的“粘性”。即,用户屏幕点击一个元素之后,:hover样式开始应用,在用户触击另一个元素之后停止应用(申明:在移动优先的WEB开发中,这往往是不推荐的,但在诸如政务或特殊应用场景,还是有一定的作用,毕竟客户的需求是第一位-译者注)。

所以,你只要在Sass编译时,将 $enable-hover-media-query设置为 ture,BootStrap则会调用 mq4-hover-shim 来禁用 :hover模拟状态,从而防止:hover的粘性。
这是一种变通方法,有一些注意事项及详细信息参阅Jquery shim文档。

打印

打印总会出各种诡异的现象-这在所有现代浏览器中都存在。

Safari浏览器从v8.0版开始,使用固定宽度的.container类可能会导致其在打印时字体非常小。有关详细信息,请参阅issue #14868WebKit bug #138192
解决方法用以下CSS方法定义:

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

Android安卓内置浏览器

在Android安卓4.1及之后的一些版本中会内置一个浏览器,而不是Chrome,这二者有一定的差异,因此也会造成一些错误呈现和脚本错误,这种情况下推荐在Android安卓系统上部署Chrome浏览器。
这其中包括:

Select选择菜单问题

<select>元素在安卓内置浏览器(不是Chrome)中,如果其元素内存在border-radius 和(或) border,网页上不会显示边缘属性(参阅this StackOverflow question问题描述)。
推荐用户使用下面的JS代码来移除内置浏览器的这个CSS冲突BUG,并将该<select>渲染成未样式化元素(这个方法还使用了浏览器的Agent属性嗅探避免了干扰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>

实际效果 点击jsbin.com上的范例查看。

验证器

为了最大化兼容旧版浏览器、尽可能提供最好的体验,Bootstrap在多个不同的地方使用了 browserhacks.com上的方法,以处理不同的浏览器、不同差异性版本的特殊的CSS问题,以克服浏览器自身存在的bug。这些hacks自然是引起了CSS验证器申明它们是不可用的。甚至于还使用了一些尚未完全标准化的最新CSS方法,使系统能够渐进增强。
这些验证器的警告在实践中不会影响生产和项目开发,因为我们的CSS的非hacky部分已经充分验证,而且用到的hacky部分不会妨碍非hacky部分的正常功能。因此这就是我们故意忽视特定的警告的原因。
HTML进行标准化验证时也能收到一些琐碎而且无关紧要的HTML验证警告,因为整个解决方案包含一些Firefox火狐浏览器Bug,参阅a certain Firefox bug