巅峰霸主 > 在线帮助文档 > bootstrap4.5文档 > 支持的浏览器和设备

bootstrap支持的浏览器和设备详情

时间:2020-04-06 14:02:22  来源:巅峰霸主  作者:烈火大地 点击:
摘要:bootstrap对当前主流浏览器的支持情况是怎么样呢,譬如IE版本和Android设备等,当前4.4.1版本还存在哪些bug需要解决,下面列出了详细的分析和数据,可以在项目开始前预先了解……

了解Bootstrap支持的浏览器和设备(从最新到旧),包括每个浏览器和设备的已知问题和错误。

支持的浏览器

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

不明确支持直接或通过平台的Web视图API使用最新版本的WebKit,Blink或Gecko的替代浏览器。但是,Bootstrap也应该(在大多数情况下)在这些浏览器中也能正常显示和运行。下面提供了更具体的支持信息。

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

# 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

我们使用Autoprefixer通过CSS前缀处理预期的浏览器支持,而CSS前缀使用Browserslist来管理这些浏览器版本。请查阅他们的文档,以了解如何将这些工具集成到您的项目中。

移动设备

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


ChromeFirefoxSafariAndroid Browser & WebViewMicrosoft Edge
Android支持支持N/AAndroid v5.0+ 支持支持
iOS支持支持支持N/A支持
Windows 10 MobileN/AN/AN/AN/A支持

PC桌面浏览器

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


ChromeFirefoxInternet ExplorerMicrosoft EdgeOperaSafari
Mac支持支持N/AN/A支持支持
Windows支持支持支持, IE10+支持支持不支持

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

非正式地,Bootstrap在Chromium和Chrome for Linux,Firefox for Linux和Internet Explorer 9中应该看起来和表现良好,尽管它们并没有得到官方支持。

有关Bootstrap必须解决的一些浏览器错误的列表,请参见“浏览器错误列表”

IE浏览器支持说明

支持Internet Explorer 10+;IE9和以下版本不支持。请注意,某些CSS3属性和HTML5元素在IE10中不完全受支持,或者要求使用前缀属性才能具有全部功能。请访问“我可以使用...”以获取有关浏览器对CSS3和HTML5功能的支持的详细信息。如果需要IE8-9支持,请使用Bootstrap 3版本

手机上的模式和下拉菜单

溢出和滚动

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

iOS文本字段和滚动

从iOS 9.2开始,在打开模态时,如果滚动手势的初始触摸在text <input>或a 的边界内<textarea><body>则将滚动模态下的内容,而不是模态本身。请参阅WebKit错误#153856

导航下拉菜单

.dropdown-backdrop由于z索引的复杂性,该元素未在iOS中的导航中使用。因此,要关闭导航栏中的下拉菜单,必须直接单击dropdown元素(或将触发iOS中的click事件的任何其他元素)。

浏览器缩放

页面缩放不可避免地会在Bootstrap和Web的其余部分中的某些组件中呈现渲染工件。根据问题,我们也许可以解决它(先搜索,然后根据需要打开一个问题)。但是,我们往往会忽略这些,因为它们通常只有骇人的解决方法而没有其他直接的解决方案。

粘性:hover/ :focus在iOS上

尽管:hover在大多数触摸设备上无法实现,但iOS模仿了此行为,导致“粘滞”悬停样式在点击一个元素后仍然存在。仅当用户点击另一个元素时,才会删除这些悬停样式。这种行为在很大程度上被认为是不希望的,并且在Android或Windows设备上似乎不是问题。

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

打印

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

从Safari v8.0开始,使用固定宽度.container类可能导致Safari在打印时使用非常小的字体大小。有关更多详细信息,请参见问题#14868WebKit错误#138192。以下CSS是一种可能的解决方法:

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

Android stock浏览器

Android 4.1(甚至显然还有一些较新的版本)随附于Browser应用程序作为默认的Web浏览器(而不是Chrome)。不幸的是,浏览器应用程序通常存在许多bug和与CSS的不一致之处。

选择菜单

<select>元素上,如果有border-radius和border应用,则Android stock浏览器将不会显示侧面控件。(有关详细信息,请参见StackOverflow问题。)使用下面的代码片段删除有问题的CSS,并<select>在Android stock浏览器上将其呈现为未样式化的元素。用户代理嗅探可避免干扰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>

想看个例子吗?查看此JS Bin演示

验证者

为了给旧的和有缺陷的浏览器提供最佳的体验,Bootstrap 在多个地方使用CSS浏览器黑客,将特殊的CSS定位于某些浏览器版本,以解决浏览器本身中的错误。可以理解,这些黑客使CSS验证程序抱怨它们无效。在几个地方,我们还使用了尚未完全标准化的尖端CSS功能,但这些功能仅用于逐步增强。

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

由于我们包含了某些Firefox错误的解决方法,因此我们的HTML文档同样具有一些琐碎且无关紧要的HTML验证警告。

(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部