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

2023-12-28 09:24:32


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.]+)/)。



?



?

文章来源:https://blog.csdn.net/happyzhlb/article/details/135251647
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。