Bootstrap/docs/4.5/getting-started/browsers-devices
浏览器和设备
了解Bootstrap支持的浏览器和设备(从现代到旧),包括每个浏览器和设备的已知问题和错误。
支持的浏览器
Bootstrap支持 最新的稳定版本 所有主要的浏览器和平台。 在Windows上, we support Internet Explorer 10-11 / Microsoft Edge.
不明确支持直接或通过平台的Web View API使用最新版本的WebKit,Blink或Gecko的替代浏览器。 但是,Bootstrap也应该(在大多数情况下)在这些浏览器中也能正常显示和运行。 下面提供了更具体的支持信息。
您可以找到我们支持的浏览器范围及其版本 在我们的 .browserslistrc file
:
我们用 自动前缀 通过CSS前缀处理预期的浏览器支持,该前缀使用 浏览器列表 管理这些浏览器版本。 请查阅他们的文档,以了解如何将这些工具集成到您的项目中。
移动设备
一般来说,Bootstrap支持每个主要平台的默认浏览器的最新版本。 请注意,不支持代理浏览器(例如Opera Mini,Opera Mobile的Turbo模式,UC Browser Mini,Amazon Silk)。
铬 | 火狐 | 苹果浏览器 | Android浏览器和WebView | 微软边缘 | |
---|---|---|---|---|---|
Android的 | 支持的 | 支持的 | N/A | 支持Android v5.0 + | 支持的 |
iOS | 支持的 | 支持的 | 支持的 | N/A | 支持的 |
Windows 10移动版 | N/A | N/A | N/A | N/A | 支持的 |
桌面浏览器
同样,支持大多数桌面浏览器的最新版本。
铬 | 火狐 | IE浏览器 | 微软边缘 | 歌剧 | 苹果浏览器 | |
---|---|---|---|---|---|---|
Mac | 支持的 | 支持的 | N/A | 支持的 | 支持的 | 支持的 |
视窗 | 支持的 | 支持的 | 支持,IE10 + | 支持的 | 支持的 | 不支持 |
对于Firefox,除了最新的正常稳定版本外,我们还支持最新的 扩展支持版本(ESR) 版本的Firefox。
非正式地,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>
内容将开始滚动。 See Chrome错误#175502 (已在Chrome v40中修复)和 WebKit错误#153852 .
iOS文本字段和滚动
从iOS 9.2开始,在打开模式对话框时,如果滚动手势的初始触摸在文本范围内 <input>
or a <textarea>
, <body>
模式下的内容将滚动而不是模式本身。 See WebKit错误#153856 .
导航栏下拉菜单
The .dropdown-backdrop
由于z-indexing的复杂性,导航中的iOS上未使用element元素。 因此,要关闭导航栏中的下拉菜单,您必须直接点击下拉菜单元素(或 iOS中会触发click事件的任何其他元素 ).
浏览器缩放
页面缩放不可避免地会在Bootstrap和Web的其余部分中的某些组件中呈现渲染工件。 根据问题,我们也许可以解决它(先搜索,然后根据需要打开一个问题)。 但是,我们往往会忽略这些,因为它们通常只有骇人的解决方法而没有其他直接的解决方案。
黏 :hover
/:focus
在iOS上
而 :hover
在大多数触摸设备上都无法实现,iOS模仿了此行为,导致“粘滞”悬停样式在点击一个元素后仍然存在。 仅当用户点击另一个元素时,才会删除这些悬停样式。 这种行为在很大程度上被认为是不希望的,并且在Android或Windows设备上似乎不是问题。
在整个v4 alpha和beta版本中,我们包含了不完整且已注释掉的代码,用于加入媒体查询填充程序,该代码将在模拟悬停的触摸设备浏览器中禁用悬停样式。 这项工作从未完全完成或启用,但为避免完全损坏,我们选择弃用 这个垫片 并保留mixins作为伪类的快捷方式。
列印
即使在某些现代浏览器中,打印也可能很古怪。
从Safari v8.0开始,使用固定宽度 .container
类可能会导致Safari在打印时使用非常小的字体大小。 See 问题#14868 and WebKit错误#138192 更多细节。 以下CSS是一种可能的解决方法:
Android股票浏览器
开箱即用,Android 4.1(甚至显然还有一些较新的版本)随附于Browser应用程序作为默认的Web浏览器(而不是Chrome)。 不幸的是,浏览器应用程序通常存在许多bug和与CSS的不一致之处。
选择菜单
On <select>
元素,如果存在 border-radius
和/或 border
应用。 (See 这个StackOverflow问题 以获取详细信息。)使用下面的代码段删除有问题的CSS并呈现 <select>
作为Android股票浏览器上未样式化的元素。 用户代理嗅探可避免干扰Chrome,Safari和Mozilla浏览器。
想看个例子吗? 查看此JS Bin演示 .
验证者
为了给旧的和有漏洞的浏览器提供最佳的体验,Bootstrap使用 CSS浏览器黑客 在某些地方将特殊CSS定位到某些浏览器版本,以解决浏览器本身中的错误。 可以理解,这些黑客使CSS验证器抱怨它们无效。 在几个地方,我们还使用了尚未完全标准化的尖端CSS功能,但这些功能仅用于逐步增强。
实际上,这些验证警告并不重要,因为CSS的非hacky部分会完全验证,并且hacky部分不会干扰非hacky部分的正常运行,因此为什么我们故意忽略这些特殊警告。
我们的HTML文档同样包含一些琐碎且无关紧要的HTML验证警告,这是因为我们包含了针对 某个Firefox错误 .