博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
1.3、Bootstrap V4自学之路------起步---浏览器支持
阅读量:7208 次
发布时间:2019-06-29

本文共 3294 字,大约阅读时间需要 10 分钟。

  hot3.png

支持的浏览器

Bootstrap 支持所有的主流浏览器和平台的最新的、稳定的版本。 在 Windows 中, **我们支持 Internet Explorer 9-11 **。下面提供了更多详细的支持信息。

移动设备

总的来说,Bootstrap支持所有主流平台的最新版本的默认浏览器。

Chrome Firefox Opera Safari Android Browser & WebView
Android 支持 支持 不支持 N/A Android v5.0+ 支持
iOS 支持 N/A 不支持 支持 N/A

桌面浏览器

差不多的,大多数最新版本的桌面浏览器也是支持的。

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

Internet Explorer 9

Internet Explorer 9也是支持的。然而,你需要知道,有一些CSS3属性和HTML5元素不被完全支持。

功能 状态
border-radius圆角边框 支持
box-shadow盒阴影 支持
transform变形 支持, 带-ms前缀
transition过渡 不支持
placeholder占位符 不支持

IE兼容模式

Bootstrap 在老版本的Internet Explorer兼容模式中不受支持。为了确保你正在使用IE的最新的渲染模式,请在你的网页的合适位置放置下面这个<meta>标签:

要想打开调试工具以确认文档模式,请按F12并检查“文档模式”。

所有的Bootstrap的文档和示例都包含了这个标签,以确保在每个版本的IE浏览器(Bootstrap支持的IE版本)中,都能得到最好的渲染可能性。意思是如果想要兼容IE浏览器,必须包含此标签内容到页面中。

Windows Phone 8中的Internet Explorer 10

Windows Phone 8中的Internet Explorer 10版本比更老,无法在@-ms-viewport规则中区分device widthviewport width,因此在Bootstrap 的CSS中应用媒体查询不起作用。为了解决这个问题,你需要包含下面的JavaScript以绕过这个bug我想我用不到windows phone手机啦 哈哈哈

// Copyright 2014-2015 Twitter, Inc.  // Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)  if (navigator.userAgent.match(/IEMobile\/10\.0/)) {    var msViewportStyle = document.createElement('style')        msViewportStyle.appendChild(                 document.createTextNode(                '@-ms-viewport{width:auto!important}'        )       )    document.querySelector('head').appendChild(msViewportStyle)}

请阅读以获取更多的使用指导信息。

作为一个提醒,我们把这些都写进了Bootstrap的文档并且进行了举例说明。

模态窗口,导航条,以及虚拟键盘

溢出和滚动

iOS和安卓对<body>元素中使用overflow: hidden的支持很有限。因此,在这两种设备的浏览器中,当你滚动超过一个模态窗口的顶部或底部,<body>内容就会开始滚动。

虚拟键盘

同时,注意如果你正在使用一个固定导航栏或者在模态窗口中使用输入法,iOS有一个渲染bug,即当触发弹出虚拟键盘时,它不会更新固定元素的位置。对这个问题的一点变通包括把你的元素转换到position: absolute;,包括激发一个焦点计时器来手工修正位置。这个不归Bootstrap处理的,所以你的应用程序如有这个问题采取何种解决方法取决于你自己。

导航栏下拉菜单

在iOS中,导航栏上不能使用.dropdown-backdrop元素,因为z-indexing的复杂性。因此,关闭导航栏的下拉菜单,你必须直接点击下拉菜单元素(或者 )。

浏览器缩放

页面缩放不可避免地影响一些组件的渲染效果, 无论是在Bootstrap网页还是在其它网页中。对于这个问题,我们可能能够修复它(发起话题前,如果可以的话请先搜索一下)。然而,我们倾向于忽视它们,因为它们大多数没有直接的解决办法,或者不太容易解决。

移动设备上的:hover/:focus粘性

即使在大多数触摸屏上,真正的悬停不可能实现,大多数移动浏览器模仿停县并使得:hover“有粘性”。换句话说,在触击一个元素之后,:hover样式样式开始应用,在用户触击另一个元素之后停止应用。在移动优先的网站上,这种表现通常是不可取的。

Bootstrap包含了针对它的一个变通,虽然它默认是不可用的。从Sass编译时只要把$use-hover-media-query设置为true,为了浏览器中禁用用以模拟悬停的:hover样式,Bootstrap将使用,它能防止粘性的:hover样式。这个变通方法有一些附加说明;请阅读 shim 的文档以了解更多。

打印

哪怕在一些现代的浏览器中,打印也可以很快。

特别是,自从Chrome v32起,无论页边距设置为什么,当需要打印一个网页时,Chrome使用一个明显窄于物理纸张尺寸的视口宽度来解决媒体查询。这将导致打印时,Bootstrap的特小网格出人意料地被激活。 请阅读了解推荐的变通方法:

除此之外,自从Safari v8.0起,固定宽度的.container可以引起Safari在打印时使用一个不寻常的小字体尺寸。请看 以了解更多。一个潜在的变通方法就是添加下列的CSS:

Copy

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

安卓内置浏览器

除了盒子,Android 4.1(以及更新的版本)使用Browser应用作为默认浏览器(而不是用Chrome)。很不幸的是,该Browser应用有很多的bug以及CSS不一致。理解为抛弃了安卓内置浏览器。

选项菜单

<select>元素中,如果不应用border-radius以及border,安卓内置浏览器不会显示边缘控件。(请阅读  以了解更多详情。)使用下面的代码片段可以在安卓内置浏览器中移除这个CSS冲突,并把该<select>渲染成未样式化的元素。该用户代理嗅觉探避免了与干扰Chrome、Safari 和 Mozilla 浏览器。

Copy

想看示例? 。

验证器

为了能够向漏洞百出的老版本的浏览器提供尽可能好的体验,Bootstrap在多个不同的地方使用了  使用针对对于特定的浏览器版本的特殊的CSS,以克服浏览器自身存在的bug。这些hacks自然是引起了CSS验证器申明它们是不可用的。在一些地方,我们也使用尚未完全标准化的前沿CSS特征,但是使用它们纯粹是为了渐进增强。

这些验证器的警告在实践中没生产妨碍,因为我们的CSS的非hacky部分已经充分验证,而且用到的hacky部分不会妨碍非hacky部分的正常功能。因此这就是我们故意忽视特定的警告的原因。

我们的HTML同样有一些琐碎而且无关紧要的HTML验证警告,因为我们的解决方案包含 .

转载于:https://my.oschina.net/asktao/blog/609266

你可能感兴趣的文章
Java中使用Jedis操作Redis
查看>>
play2.0实现新浪OAuth2.0
查看>>
QT:使用“状态模式”绘制界面 参考的一种面向对象的绘制图片的方法
查看>>
for 循环 里面 save 的问题
查看>>
常用 arm 汇编指令
查看>>
如何用_R_语言的_Shiny_库编写_web_程序
查看>>
mysql初步入门
查看>>
你对C++语言的理解到了哪一步呢
查看>>
JEECMS中FreeMarker的Macro
查看>>
高性能JavaScript(您值得一看)
查看>>
工作记录
查看>>
MySQL修改默认字符集
查看>>
HTTP Keep-Alive是什么?如何工作?
查看>>
maven 异常解决
查看>>
实现林间的选择性身份验证
查看>>
进程的调度算法
查看>>
使用elasticsearch1.5.2实现查找附近的人
查看>>
SQL SERVER 批量将修改字段名为大、小写
查看>>
#ifdef __cplusplus extern C{}与C和C++间的关系
查看>>
lvs的nat模式实验
查看>>