1.3、Bootstrap V4自学之路------起步---浏览器支持
为什么80%的码农都做不了架构师?>>>
支持的浏览器
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>
标签:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
要想打开调试工具以确认文档模式,请按F12并检查“文档模式”。
所有的Bootstrap的文档和示例都包含了这个标签,以确保在每个版本的IE浏览器(Bootstrap支持的IE版本)中,都能得到最好的渲染可能性。意思是如果想要兼容IE浏览器,必须包含此标签内容到页面中。
Windows Phone 8中的Internet Explorer 10
Windows Phone 8中的Internet Explorer 10版本比Update 3 (a.k.a. GDR3)更老,无法在@-ms-viewport
规则中区分device width和viewport 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)
}
请阅读Windows Phone 8 and Device-Width以获取更多的使用指导信息。
作为一个提醒,我们把这些都写进了Bootstrap的文档并且进行了举例说明。
模态窗口,导航条,以及虚拟键盘
溢出和滚动
iOS和安卓对<body>
元素中使用overflow: hidden
的支持很有限。因此,在这两种设备的浏览器中,当你滚动超过一个模态窗口的顶部或底部,<body>
内容就会开始滚动。
虚拟键盘
同时,注意如果你正在使用一个固定导航栏或者在模态窗口中使用输入法,iOS有一个渲染bug,即当触发弹出虚拟键盘时,它不会更新固定元素的位置。对这个问题的一点变通包括把你的元素转换到position: absolute;
,包括激发一个焦点计时器来手工修正位置。这个不归Bootstrap处理的,所以你的应用程序如有这个问题采取何种解决方法取决于你自己。
导航栏下拉菜单
在iOS中,导航栏上不能使用.dropdown-backdrop
元素,因为z-indexing的复杂性。因此,关闭导航栏的下拉菜单,你必须直接点击下拉菜单元素(或者 iOS 中任何其他可以启动单击事件的元素)。
浏览器缩放
页面缩放不可避免地影响一些组件的渲染效果, 无论是在Bootstrap网页还是在其它网页中。对于这个问题,我们可能能够修复它(发起话题前,如果可以的话请先搜索一下)。然而,我们倾向于忽视它们,因为它们大多数没有直接的解决办法,或者不太容易解决。
移动设备上的:hover
/:focus
粘性
即使在大多数触摸屏上,真正的悬停不可能实现,大多数移动浏览器模仿停县并使得:hover
“有粘性”。换句话说,在触击一个元素之后,:hover
样式样式开始应用,在用户触击另一个元素之后停止应用。在移动优先的网站上,这种表现通常是不可取的。
Bootstrap包含了针对它的一个变通,虽然它默认是不可用的。从Sass编译时只要把$use-hover-media-query
设置为true
,为了浏览器中禁用用以模拟悬停的:hover
样式,Bootstrap将使用mq4-hover-shim,它能防止粘性的:hover
样式。这个变通方法有一些附加说明;请阅读 shim 的文档以了解更多。
打印
哪怕在一些现代的浏览器中,打印也可以很快。
特别是,自从Chrome v32起,无论页边距设置为什么,当需要打印一个网页时,Chrome使用一个明显窄于物理纸张尺寸的视口宽度来解决媒体查询。这将导致打印时,Bootstrap的特小网格出人意料地被激活。 请阅读#12078了解推荐的变通方法:
除此之外,自从Safari v8.0起,固定宽度的.container
可以引起Safari在打印时使用一个不寻常的小字体尺寸。请看#14868 以了解更多。一个潜在的变通方法就是添加下列的CSS:
Copy
@media print {.container { width: auto;}
}
安卓内置浏览器
除了盒子,Android 4.1(以及更新的版本)使用Browser应用作为默认浏览器(而不是用Chrome)。很不幸的是,该Browser应用有很多的bug以及CSS不一致。理解为抛弃了安卓内置浏览器。
选项菜单
在<select>
元素中,如果不应用border-radius
以及border
,安卓内置浏览器不会显示边缘控件。(请阅读 this StackOverflow question 以了解更多详情。)使用下面的代码片段可以在安卓内置浏览器中移除这个CSS冲突,并把该<select>
渲染成未样式化的元素。该用户代理嗅觉探避免了与干扰Chrome、Safari 和 Mozilla 浏览器。
Copy
<script>
$(function () {var nua = navigator.userAgentvar 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 demo 上找找。
验证器
为了能够向漏洞百出的老版本的浏览器提供尽可能好的体验,Bootstrap在多个不同的地方使用了 CSS 浏览器hacks 使用针对对于特定的浏览器版本的特殊的CSS,以克服浏览器自身存在的bug。这些hacks自然是引起了CSS验证器申明它们是不可用的。在一些地方,我们也使用尚未完全标准化的前沿CSS特征,但是使用它们纯粹是为了渐进增强。
这些验证器的警告在实践中没生产妨碍,因为我们的CSS的非hacky部分已经充分验证,而且用到的hacky部分不会妨碍非hacky部分的正常功能。因此这就是我们故意忽视特定的警告的原因。
我们的HTML同样有一些琐碎而且无关紧要的HTML验证警告,因为我们的解决方案包含 一定的 Firefox 的 bug.
转载于:https://my.oschina.net/asktao/blog/609266
1.3、Bootstrap V4自学之路------起步---浏览器支持相关推荐
- 4.4、Bootstrap V4自学之路------组件---表单
为什么80%的码农都做不了架构师?>>> 表单控件 下面是一个Bootstrap支持的表控件以及自定义类的完整列表.额外的文档对每个组都是可用的. 类 作用 支持的变量 .fo ...
- 4.22、Bootstrap V4自学之路-----内容---轮播
为什么80%的码农都做不了架构师?>>> 示例 <div id="carousel-example-generic" class="caro ...
- 4.18、Bootstrap V4自学之路-----内容---滚动监听
为什么80%的码农都做不了架构师?>>> 总体来说,用起来不是特别满意,先放一放吧. 导航条示例 滚动监听插件会根据滚动的位置,自动更新导航条的目标.滚动在导航条下面的区域,查 ...
- 4.19、Bootstrap V4自学之路-----内容---提示冒泡
为什么80%的码农都做不了架构师?>>> 我一直没有调试出来,包裹引入tether.min.js仍然无法出发效果. mark着,回头再看.先熟悉文档. 概述 在使用提示冒泡插件 ...
- 4.7、Bootstrap V4自学之路------组件---广告屏
为什么80%的码农都做不了架构师?>>> 示例 单独的一个空的标签 <div class="jumbotron"><!-- 背景色是灰色的 ...
- 一名非计算机专业,却走着IT行业--自学之路
曾何几时,我是多么向往理想中的大学,那些无夜无日的学习也只有已经死去的高四吗?我曾因高三高考的成绩而感觉到我的人生已经悬崖勒马了.那年的暑假,我把自己关在房子里,一直在想,我未来的路如何走,多次 ...
- web前端自学之路分享
前言: 2018年随着编程的火热和自身对这岗位的热爱,这一年毅然决然的开始了自己的自学之路,这一阶段的学习过程中有很多感触,随着工作逐步稳定想要写下来和正在学习或者正在犹豫要不要学习的人们一起分享.也 ...
- Axure RP9 自学之路2-基础操作篇
关注头条@路飞写代码,获取更多内容 上期回顾 前一篇文章我们主要是介绍了软件的安装,以及学习该软件的一些初衷,以及对软件的一些区域功能进行了相应的说明. 主要知识点 添加元件.设置元件名称.位置尺寸. ...
- python自学网站有哪些-Python自学之路-前期准备
继上一篇「Python自学之路-序」之后,决定开始零基础学习Python了,今天花了点时间去系统的了解下Python,同时也找了一些相关的教程,这里分享给大家. (一)Python可以做什么 1.各式 ...
最新文章
- 【C#实践】三层:初识
- socket中select针对阻塞I/O复用注意的问题
- Ubuntu 里的Spyder不能切换中文输入
- java基础----Java的格式化输出
- 大规模中文概念图谱CN-Probase正式发布
- [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能
- 论文浅尝 | 基于用户反馈的交互式自然语言回答系统提升机制
- java中的关键字有哪些_Java关键字有哪些?
- .net foreach 未执行完就到下一行了_PHP五十个提升执行效率的小技巧,和常见问题...
- debugfs查看文件块号,dd命令读指定块号的内容
- linux根目录下各文件的作用
- python编程单词排序_Python:对输入的单词进行字典序排序输出
- A certificate chain processed, but terminated in a root certificate which is not trusted...
- 骚操作:Mac局域网控制Windows10主机
- 【英文论文写作经验分享】1、Abstract 怎么写?
- PDF.js使用教程
- ASA入门实验之NAT
- 导入 xlsx php,php如何使用phpexcel类导入excel表格数据
- 微信小程序 - 基本原理
- uni-app ——uni-app的基本使用