<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">解疑释惑

1、X-UA-Compatible

X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。

在网页中指定的模式优先权高于服务器中(通过HTTP Header)所指定的模式。 兼容性模式设置优先级:

meta tag > http header
meta tag > http header

常用的例子:

<meta http-equiv="X-UA-Compatible" content="IE=7">  
#以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=8">  
#以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
#以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。  
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">  
<meta http-equiv="X-UA-Compatible" content="IE=7,9">  
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.

2、 content = "IE=Edge,chrome=1" 

meta信息中常有这么一句:

<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

这里的chrome=1不是说IE的技术增强了可以模拟Chrome浏览器,而是与谷歌开发的Google Chrome Frame(谷歌内嵌浏览器框架GCF)有关

这个插件可以让用户的IE浏览器外观不变,但用户在浏览网页时实际上使用的是Chrome的内核,并且支持Windows XP及以上系统的IE6/7/8。

而上文提到的那个meta标记,则是在是安装了GCF后,用来指定页面使用chrome内核来渲染。

自动适应手机屏幕宽度的方法

ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么。使用

ViewPort <meta>标记还表示文档针对移动设备进行了优化。ViewPort <meta>标记的content值是由指令及其值组成的以逗号分隔的列表。

 

在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
viewport 语法介绍:
01    <!-- html document -->
02    <meta name="viewport"
03        content="
04            height = [pixel_value | device-height] ,
05            width = [pixel_value | device-width ] ,
06            initial-scale = float_value ,
07            minimum-scale = float_value ,
08            maximum-scale = float_value ,
09            user-scalable = [yes | no] ,
10            target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
11        "
12    />

其中:

width=device-width :表示宽度是设备屏幕的宽度

initial-scale=1.0:表示初始的缩放比例

minimum-scale=0.5:表示最小的缩放比例

maximum-scale=2.0:表示最大的缩放比例

user-scalable=yes:表示用户是否可以调整缩放比例

target-densitydpi=

 device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。

 high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。

 medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设备相应缩小。 这是默认的target density.

 low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。

 <value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间,超过这个值范围,会使用默认的 target density。

 

 

 

 

 

posted on 2018-01-17 09:45  最菜的后端想转前端  阅读(308)  评论(0编辑  收藏  举报

导航