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错误 .