判断浏览器类型，CSS兼容不同浏览器的写法，CSS自适应不同设备宽度的写法

CSS3中兼容谷歌的前缀
----------------------------------------------------------------------------

CSS3中的兼容性问题一直是前端开发者的重要关注点之一。其中，兼容谷歌浏览器的前缀更是一大难点，下面小编为大家介绍一下相关知识点。

/* 在谷歌浏览器中使用flex布局，需要加上-webkit-前缀 */
display: -webkit-flex;
display: flex;

/* 谷歌浏览器中线性渐变需要加上-webkit-前缀 */
background: -webkit-linear-gradient(red, yellow);

/* 盒阴影需要在谷歌浏览器中使用-webkit-box-shadow前缀 */
box-shadow: -webkit-box-shadow: 10px 10px 5px #888888;
box-shadow: box-shadow: 10px 10px 5px #888888;

/* 旋转效果需要在谷歌浏览器中使用-webkit-transform前缀 */
-webkit-transform: rotate(30deg);
transform: rotate(30deg);

上面的代码中，我们可以看到在谷歌浏览器中需要添加-webkit-前缀。这是因为不同的浏览器支持的CSS3属性可能存在差异，而前缀可以让浏览器在实现属性时选择正确的方式。

然而，随着浏览器的不断更新迭代，很多CSS3属性已经不需要添加前缀了。比如常用的flex布局、变形效果、动画效果等属性，新版浏览器已经不需要前缀就可以实现。

因此，在使用CSS3样式时，我们需要清醒认识到哪些属性还需要前缀，哪些已经不需要了。这样才能让我们轻松应对页面开发中的兼容问题。

前端css中常见的-moz-,-webkit-,-o-分别是什么？
----------------------------------------------------------------------------
-moz-,-webkit-,-o-这三个是厂商前缀

不同浏览的厂商,因为不同浏览器有不同的标准，
所以为了兼容性，需要把常用的浏览器对应的厂商前缀加上。
所以四个属性代表的是一个意思。

-moz- 是火狐浏览器厂商前缀

-webkit- 是谷歌浏览器厂商前缀

-o- 是opera浏览器厂商前缀

CSS兼容 -webkit-xxx 的含义
?----------------------------------------------------------------------------

-webkit- 是 WebKit 浏览器引擎所采用的浏览器私有前缀，用于支持实验性或未被标准化的 CSS 属性和特性。

-webkit- 是表示针对 safari、chrome 浏览器支持（webkit内核的私有属性），

-ms- 表示针对 IE 浏览器支持私有属性。

-moz- 是Firefox Gecko内核，moz代表的是Firefox的开发商Mozilla。

-webkit-
在 WebKit 浏览器中，开发者可以在 CSS 属性前加上 -webkit- 前缀，以启用 WebKit 浏览器引擎的私有实现。例如，-webkit-border-radius 属性可以设置元素的圆角。

以下是一个使用 -webkit- 前缀的示例代码：

.box {
? -webkit-border-radius: 10px;
? border-radius: 10px;
}?

如下表示的是在 X 轴向右移动 50px, Y 轴向下移动 100px。

div {
? -ms-transform: translate(50px, 100px);
? -webkit-transform: translate(50px, 100px);

? transform: translate(50px, 100px);
}

- `scale`：

缩放，1 为原始大小。参数正数时放大，负数缩小。属性值为一个时，`x/y` 轴同时缩放；属性值为两个值时，分别控制 `x`、`y` 轴的缩放。

- `rotate`：

水平旋转，属性值格式为 `Xdeg`。`X` 为正数时，顺时针旋转；为负数时，逆时针旋转

- `translate`：

平移，基于 `XY` 轴重新定位元素。属性值为一个时，`x`、`y` 轴参数相同；为两个时，`x`、`y` 轴分别定位

- `skew`：将元素沿水平方向倾斜变形。属性值为一个时，`x/y` 轴参数相同；为两个时，`x`、`y` 轴各自倾斜。

注意：

需要注意的是，使用 -webkit- 前缀的属性并不是 W3C 标准中定义的标准 CSS 属性，因此可能不被所有浏览器支持。因此，在使用 -webkit- 前缀的属性时，应该尽可能地提供一个标准的 CSS 属性作为备选方案，以确保在不同的浏览器中都能正确地显示

?

CSS3 Media 的媒体查询。在第一段代码上用的是小于960px尺寸的写法，那现在来实现等于960px尺寸的代码：

@media screen and (max-device-width:960px){
? ? body{
? ? ? ? background:red;
? ? }
}

然后是浏览器尺寸大于960px时的代码：

@media screen and (min-width:960px){
? ? body{
? ? ? ? background:orange;
? ? }
}

还可以混合使用上面的用法：

@media screen and (min-width:960px) and (max-width:1200px){
? ? body{
? ? ? ? background:yellow;
? ? }
}

上面这段代码的意思是当页面宽度大于960px且小于1200px的时候执行下面的CSS。

?

Media所有参数汇总
?----------------------------------------------------------------------------
以上是最常用到的媒体查询器的三个特性，大于，等于，小于的写法。媒体查询器的全部功能肯定不止这三个功能，下面总结它的一些参数用法：

width:浏览器可视宽度。
height:浏览器可视高度。
device-width:设备屏幕的宽度。
device-height:设备屏幕的高度。
orientation:检测设备目前处于横向还是纵向状态。
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio:检测设备的宽度和高度的比例。
color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
grid：检测输出的设备是网格的还是位图设备。

注意以下顺序，如果把@media (min-width: 768px)写在了最下方，那么很悲剧，

@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }

这是因为如果屏幕宽度是1440，由于1440>768那么1200就会失效。

所以在使用min-width时，小的在前面，大的在后面；同理，如果使用max-width时，就是大的在前面，小的在后面。

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }

@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }
?

横屏与竖屏

/* 竖屏 */ ?
@media screen and (orientation: portrait) and (max-width: 720px) { 对应样式 } ?
??
/* 横屏 */ ?
@media screen and (orientation: landscape) { 对应样式 }?

PC端按屏幕宽度大小排序

分辨率 ? ?? ?比例 | 设备尺寸
1024*500 ?? ?（8.9寸）
1024*768 ?? ?（比例 4：3 ?| 10.4寸、12.1寸、14.1寸、15寸; ）
1280*800?? ?（比例 16：10 ?|15.4寸）
1280*1024?? ?（比例 5：4 ?| 14.1寸、15.0寸）
1280*854?? ?（比例 15：10 | 15.2）
1366*768 ?? ?（比例 16：9 | 不常见）
1440*900 ?? ?（比例 16：10 ?17寸 仅苹果用）
1440*1050?? ?（比例 5：4 ?| 14.1寸、15.0寸）
1600*1024?? ?（比例 14：9 ?不常见）
1600*1200 ?? ?（比例 4：3 | 15、16.1）
1680*1050?? ?（比例 16：10 | 15.4寸、20.0寸）
1920*1200 ?? ?（23寸）

通过上面电脑屏幕尺寸的例表得到了几个宽度：1024、1280、1366、1440、1600、1680、1920。

屏幕自适应CSS3代码

@media (min-width: 1024px){
? body{font-size: 18px}
} /*>=1024的设备*/
@media (min-width: 1100px) {
? body{font-size: 20px}
} /*>=1024的设备*/
@media (min-width: 1280px) {
? body{font-size: 22px;}
}?
@media (min-width: 1366px) {
? body{font-size: 24px;}
} ?
@media (min-width: 1440px) {
? body{font-size: 25px !important;}
}?
@media (min-width: 1680px) {
? body{font-size: 28px;}
}?
@media (min-width: 1920px) {
? body{font-size: 33px;}
}?
?

/* 只针对Chrome浏览器 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
? ? .hide-in-chrome {
? ? ? ? display: none;
? ? }
}

/* 只针对Firefox火狐浏览器 */
@-moz-document url-prefix() {
? ? .test {
? ? ? ? ?font-size: 2rem;
? ? ?}
}?

? ? /* 只针对Chrome浏览器，并且屏幕最大宽度不超过1200像素(更改成对应移动设备的尺寸，做自适应处理，以兼容不同设备不同浏览器宽度的排版)??*/

?@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) and (max-width:1200px){ ?
? ? ? ? .piece3-5{ top: 462vw; }

} ?

?

一、判断是否为IE浏览器
　　以前判断是否IE浏览器用的是window.navigator.userAgent，跟踪这个信息，发现在开发环境，识别为IE10，但访问服务器则识别为IE11，但IE11的userAgent里是没有MSIE标志的，所以原来的判断方式就判断不出IE11。

　　原来的函数写法：对于新版的ie11已经不支持了

function isIE(){
? ? if (window.navigator.userAgent.indexOf("MSIE")>=1)?
? ? return true;?
? ? else
? ? return false;?
}

　　ie10及以上不支持ie浏览器的判断了，因为ie11已经不支持document.all了，下面是支持ie11的版本的，当然ie6-8也是支持的。

function isIE() {
? ? if (!!window.ActiveXObject || "ActiveXObject" in window)
? ? return true;
? ? else
? ? return false;
}
?

?二、根据 userAgent 判断浏览器类型
/*?
? ?* 描述：判断浏览器信息?
? ?* 编写：LittleQiang_w?
? ?* 日期：2016.1.5?
? ?* 版本：V1.1?
? ?*/ ?
??
? //判断当前浏览类型 ?
? function BrowserType() ?
? { ?
? ? ? var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 ?
? ? ? var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器 ?
? ? ? var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器 ?
? ? ? var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器 ?
? ? ? var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器 ?
? ? ? var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器 ?
? ? ? var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器 ?
??
? ? ? if (isIE)?{ ?
? ? ? ? ? ?var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); ?
? ? ? ? ? ?reIE.test(userAgent); ?
? ? ? ? ? ?var fIEVersion = parseFloat(RegExp["$1"]); ?
? ? ? ? ? ?if(fIEVersion == 7) ?
? ? ? ? ? ?{ return "IE7";} ?
? ? ? ? ? ?else if(fIEVersion == 8) ?
? ? ? ? ? ?{ return "IE8";} ?
? ? ? ? ? ?else if(fIEVersion == 9) ?
? ? ? ? ? ?{ return "IE9";} ?
? ? ? ? ? ?else if(fIEVersion == 10) ?
? ? ? ? ? ?{ return "IE10";} ?
? ? ? ? ? ?else if(fIEVersion == 11) ?
? ? ? ? ? ?{ return "IE11";} ?
? ? ? ? ? ?else ?
? ? ? ? ? ?{ return "0"}//IE版本过低 ?
? ? ? ?}//isIE end ?
? ? ? ? ?
? ? ? ?if (isFF) { ?return "FF";} ?
? ? ? ?if (isOpera) { ?return "Opera";} ?
? ? ? ?if (isSafari) { ?return "Safari";} ?
? ? ? ?if (isChrome) { return "Chrome";} ?
? ? ? ?if (isEdge) { return "Edge";} ?
? ?} //myBrowser() end ?
? ? ?

? ?//判断是否是IE浏览器 ?
? ?function isIE() ?
? ?{ ?
? ? ? var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 ?
? ? ? var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器 ?
? ? ? if(isIE) ?
? ? ? { ?
? ? ? ? ? return "1"; ?
? ? ? } ?
? ? ? else ?
? ? ? { ?
? ? ? ? ? return "-1"; ?
? ? ? } ?
? ?} ?
? ? ?
? ? ?
? ?//判断是否是IE浏览器，包括Edge浏览器 ?
? ?function IEVersion() ?
? ?{ ?
? ? ? var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 ?
? ? ? var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器 ?
? ? ? var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器 ?
? ? ? if(isIE) ?
? ? ? { ?
? ? ? ? ? ?var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); ?
? ? ? ? ? ?reIE.test(userAgent); ?
? ? ? ? ? ?var fIEVersion = parseFloat(RegExp["$1"]); ?
? ? ? ? ? ?if(fIEVersion == 7) ?
? ? ? ? ? ?{ return "IE7";} ?
? ? ? ? ? ?else if(fIEVersion == 8) ?
? ? ? ? ? ?{ return "IE8";} ?
? ? ? ? ? ?else if(fIEVersion == 9) ?
? ? ? ? ? ?{ return "IE9";} ?
? ? ? ? ? ?else if(fIEVersion == 10) ?
? ? ? ? ? ?{ return "IE10";} ?
? ? ? ? ? ?else if(fIEVersion == 11) ?
? ? ? ? ? ?{ return "IE11";} ?
? ? ? ? ? ?else ?
? ? ? ? ? ?{ return "0"}//IE版本过低 ?
? ? ? } ?
? ? 　else if(isEdge) ?
? ? ? { ?
? ? ? 　　return "Edge"; ?
? ? ? } ?
? ? ? else ?
? ? ? { ?
? ? ? 　　return "-1";//非IE ?
? ? ? } ?
? ?} ? ? ??

　　以上代码通过测试，但存在一个问题，即IE5与IE7浏览器暂不能区分，以下是IE5与IE7下userAgent的信息；通过userAgent发现，简单的通过以上方法，无法正确区分IE5和IE7。

三、各浏览器的 userAgent?
　　
1、IE

　　（1）IE11

　　Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko

　　（2）IE10

　　Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)

　　（3）IE9

　　Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)

　　（4）IE8

　　Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)

　　（5）IE7

　　Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)

　　（4）IE5

　　Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; Touch; .NET4.0C; .NET4.0E; Tablet PC 2.0; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)

　　2、Edge

　　Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393

　　Edge 的userAgent还包含了 Chrome 和 Safari的特征。

　　3、Firefox48.0

　　Mozilla/5.0 (Windows NT 10.0; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0
?

四、各浏览器特性
　　1、IE

　　只有IE支持创建ActiveX控件，因此她有一个其他浏览器没有的东西，就是ActiveXObject函数。只要判断window对象存在ActiveXObject函数，就可以明确判断出当前浏览器是IE。而IE各个版本判断userAgent。

　　2、Firefox

　　Firefox中的DOM元素都有一个getBoxObjectFor函数，用来获取该DOM元素的位置和大小（IE对应的中是getBoundingClientRect函数）。这是Firefox独有的，判断它即可知道是当前浏览器是Firefox。Firefox的版本用 userAgent 判断，其中，版本号是Firefox之后的数字。

　　3、Opera

　　Opera提供了专门的浏览器标志，就是window.opera属性。Opera典型的userAgent如下：

　　Opera/9.27 (Windows NT 5.2; U; zh-cn)

　　其中，版本号是靠近Opera的数字。

　　4、Safari

　　Safari浏览器中有一个其他浏览器没有的openDatabase函数，可做为判断Safari的标志。Safari通过userAgent如下：

　　Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13

　　其版本号是Version之后的数字。

　　5、Chrome

　　Chrome有一个MessageEvent函数，但Firefox也有。不过，好在Chrome并没有Firefox的getBoxObjectFor函数，根据这个条件还是可以准确判断出Chrome浏览器的。目前，Chrome的userAgent是：

　　Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

　　其中，版本号在Chrome只后的数字。Chrome的userAgent还包含了Safari的特征。

　　可以根据各浏览器的特性来判断浏览器类型，我们把对IE的判断放在第一，因为IE的用户最多，其次是判断Firefox。按使用者多少的顺序来判断浏览器类型，可以提高判断效率，少做无用功。之所以将Chrome放在第三判断，是因为我们预测Chrome很快会成为市场占有率第三的浏览器。其中，在分析浏览器版本时，用到了正则表达式来析取其中的版本信息。

　　如：ua.match(/version\/([\d.]+)/)。



?

?