浏览器与设备

了解 Bootstrap4 在各个浏览器和设备上的表现,这包含一些已知的奇怪问题。

浏览器

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

由于浏览器日新月异,大部分最新版本浏览器的内核可能无法确定提供一致的表现。不过 Boostrap 应该不会让你失望。

你可以在 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"
]

我们使用 Autoprefixer 通过 CSS 前缀处理预期的浏览器支持,CSS 前缀使用浏览器列表来管理这些浏览器版本。 有关如何将这些工具集成到项目中的信息,请参阅其文档。

移动设备

一般来说,Bootstrap 支持每个主要平台的默认浏览器的最新版本。 请注意,不支持代理浏览器(如 Opera Mini,Opera Mobile 的 Turbo 模式,UC Browser Mini,Amazon Silk)。

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android 支持 支持 不存在 Android v5.0+ 支持 支持
iOS 支持 支持 支持 不存在 支持
Windows 10 Mobile 不存在 不存在 不存在 不存在 支持

桌面浏览器

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

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac 支持 支持 不存在 不存在 支持 支持
Windows 支持 支持 支持, IE10+ 支持 支持 不支持

对于Firefox,除了最新的正常稳定版本,我们还支持最新的扩展支持版本(ESR) Firefox版本。

非正式地,Bootstrap 应该在 Chromium 和 Chrome for Linux,Firefox for Linux 和Internet Explorer 9中看起来和表现得足够好,尽管它们不受官方支持。

Internet Explorer

支持Internet Explorer 10+; IE9及更老版本不受支持(这意味如果你强行使用可能不会有很好的效果)。 请注意,IE10中不完全支持某些CSS3属性和HTML5元素,或者需要前缀属性才能获得完整功能。 访问 这个网站 ,了解有关CSS3和HTML5功能的浏览器支持的详细信息。

如果你需要IE8-9支持,请使用 Bootstrap 3. 这是我们代码中最稳定的版本,Bootstrap 的团队仍然支持关键错误修正和文档更改。 但是,不会添加任何新功能。

移动设备上的模态(Modal)和下拉菜单

内容溢出(overflow)和滚动(scrolling)

在 iOS 和 Android 中,对< body> 元素的 overflow:hidden; 的支持非常有限。 为此,当你在这些设备的浏览器中滚动浏览模式的顶部或底部时,< body> 内容将开始滚动。 请参阅 Chrome错误#175502 (已在Chrome v40中修复)和 WebKit bug#153852

iOS 文本字段和滚动

从iOS 9.2开始,当模态(Modal)打开时,如果滚动手势的初始触摸位于文本< input> < textarea> ,模式下面的< body> 内容将被滚动而不是模态本身。 请参阅 WebKit错误#153856

由于z-indexing的复杂性,导航中的iOS上未使用 .dropdown-backdrop 元素。 因此,要关闭导航栏中的下拉列表,你必须直接单击下拉元素(或任何其他元素 这将触发iOS中的点击事件)。

浏览器缩放

页面缩放不可避免地在 Bootstrap 和 Web 的其他部分中呈现某些组件中的渲染工件。 根据问题,我们可以修复它(首先搜索,然后在需要时打开问题)。 但是,我们倾向于忽略这些,因为除了变通方法之外,它们通常没有直接的解决方案。

iOS 上的 Sticky :hover/:focus

虽然在大多数触摸设备上都无法使用 :hover ,但iOS会模仿此行为,导致“粘性”悬停样式在点击一个元素后仍然存在。 只有当用户点击其他元素时,才会删除这些悬停样式。 这种行为在很大程度上被认为是不受欢迎的,在Android或Windows设备上似乎不是问题。

在我们的v4 alpha和beta版本中,我们包含了用于选择媒体查询填充程序的不完整和注释掉的代码,该代码将禁用模拟悬停的触摸设备浏览器中的悬停样式。 这项工作从未完全完成或启用,但为了避免完全以外情况,我们选择弃用这部分和 将mixins保留为伪类的快捷方式。

打印

即使在一些现代浏览器中,打印也可能很古怪。

从Safari v8.0开始,使用固定宽度的 .container 类会导致Safari在打印时使用非常小的字体大小。 请参阅bug#14868 WebKit bug#138192 了解更多详情。 一个可能的解决方法是以下CSS:

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

Android 内置浏览器

Android 4.1(显然是一些较新的版本)内置了浏览器,作为默认的Web浏览器(与Chrome相反)。 不幸的是,这些内置的浏览器通常有很多错误和CSS的不一致表现。

选择菜单

在 select 元素上,如果应用了 border-radius 或 border,Android 内置浏览器将不会显示侧边控件。使用下面的代码片段删除有问题的CSS并将 select 呈现为 Android 内置浏览器上的无样式元素。 用户代理嗅探可避免干扰 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 browser hacks 将特定CSS定位到某些浏览器版本中解决浏览器本身的错误。在一些地方,我们还使用尚未完全标准化的前沿 CSS 功能,但这些功能仅用于渐进增强。

这些验证警告在实践中无关紧要,因为我们 CSS 的非hacky部分确实完全验证并且hacky部分不会干扰非hacky部分的正常运行,因此我们故意忽略这些特定警告。

由于我们包含针对某个Firefox错误的变通方法,因此我们的HTML文档同样具有一些微不足道且无关紧要的HTML验证警告。