浅谈X-UA-Compatible&viewport

作为一个后端开发者，在自建博客的过程中，发现了前端工作的不易与重要性，相互尊重才是成王之道，自己已在全栈工程师的行程中奔波。

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="format-detection" content="telephone=no">

首先！感谢：给网站添加X-UA-Compatible标签-[Sivan]

代码

<meta http-eqiv="X-UA-Compatible" content="ie=edge">

什么是X-UA-Compatible？

X-UA-Compatible是IE8的一个专有属性，他告诉IE8采用何种IE版本去渲染网页，在html中的head标签中使用。可以在微软官方文档获取更多介绍。

为什么要用X-UA-Compatible？

在IE8刚推出的时候，很多网页由于重构的问题，无法适应较高级的浏览器，所以使用X-UA-Comptible标签来强制IE8采用低版本方式渲染
使用下面这段代码后，开发者无需考虑网页是否兼容IE8浏览器，只要确保网页在IE6、IE7下的表现就可以了

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

时至今日，IE6已被微软判了死刑，我们在重构时应首先考虑更完善的IE8下的体验，然后依次回退兼容IE7和6。令我担忧的情况是当IE9正式发布时如果IE6在国内还没被淘汰，那么将出现前端工程师需要面临4个IE版本的疯狂局面（且4个版本显示差异较明显）。

给网站添加X-UA-Compatible标签

我建议使用下面的X-UA-Compatible标签：

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

IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame

网页中添加方法

在<head>下面添加上述代码即可。WordPress则在主题header.php文件里做修改。

这样的方法简单快捷，但是弊端是代码将无法通过W3C验证。其实这并不是问题，毕竟标准只是标准，如果只有这一个“错误”完全不会有任何不良的影响。

当然你可能像Sivan一样有代码洁癖和一定程度的标准癖，那么我们还可以从服务器端进行这个设置，请继续往下看。

Apache服务器设置方法

嗯⋯⋯我们可以在Apache主机做一些设置让服务器告诉IE采用何种引擎来渲染。在网站作用目录找到或新建.htaccess文件，添加下面的内容保存即可。

<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge" env=ie
    BrowserMatch chromeframe gcf
    Header append X-UA-Compatible "chrome=1" env=gcf
  </IfModule>
</IfModule>

Nginx服务器设置方法

现在很多朋友使用Nginx作为搭建环境，当然也是OK的。找到\nginx\conf\nginx.conf并编辑，在server { }区域里（最好是闭合符前面起一行）添加下列代码即可

add_header "X-UA-Compatible" "IE=Edge,chrome=1";

不清楚具体位置的请参考paul irish的配置文件。

好啦，上面就是3种常用的添加方法。我认为这个标签主要是为重构者服务，如果代码的兼容性很强那么不用也罢。

Chrome Frame[1]：Chrome Frame可以让旧版IE浏览器使用Chrome的WebKit渲染引擎处理网页，因此旧版IE用户可以体验到包括HTML5在内的众多现代网页技术。

以上文章基本介绍了X-UA-Compatible，那下面这篇文章则对其进行了更加详细的解释：

！感谢：HTML Meta中X-UA-Compatible详解-[爱死费崇政]

IE兼容模式：

为了帮助确保网页在将来的 Internet Explorer 版本中具有一致的外观，Internet Explorer 8 引入了文档兼容性。文件兼容性用于定义IE如何渲染网页。

怎么查看当前网页在IE下的兼容性模式：
在浏览器中按F12打开IE开发人员工具可以查看到浏览器模式和文档模式。
1、浏览器模式影响浏览器的行为表现以及声明的版本号。
2、文档模式影响DOM的转换、渲染操作，影响的是浏览器的外观表现，决定网页显示成什么样子的。
X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。

<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" />

IE文档兼容性模式所有可能的值：
1、Emulate IE8 mode指示IE使用指令来决定如何编译内容。Standards mode指令会显示成IE8 Standards mode而quirks mode会显示成IE5 mode。不同于IE8 mode，Emulate IE8 mode重视指令。
2、Emulate IE7 mode指示IE使用指令来决定如何编译内容。Standards mode指令会显示成IE7 Standards mode而quirks mode会显示成IE5 mode。不同于IE7 mode，Emulate IE7 mode重视指令。对于许多网页来说这是最推荐的兼容性模式。

3、IE5 mode 编译内容如同IE7的quirks mode之显示状况，和IE5中显示的非常类似。
4、IE7 mode编译内容如同IE7的standards mode之显示状况，无论网页是否含有指令。
5、IE8 mode提供对业界标准的最高支持，包含 W3C Cascading Style Sheets Level 2.1 Specification和W3C Selectors API，并有限的支持 W3C Cascading Style Sheets Level 3 Specification (Working Draft)。
6、Edge mode指示IE以目前可用的最高模式显示内容。当使用IE8时其等同于IE8 mode。若(假定)未来放出支持更高兼容性模式的IE，使用Edge mode的页面会使用该版本能支持的最高模式来显示内容。同样的那些页面在使用IE8浏览时仍会照常显示。

注意事项：
1、根据官网定义X-UA-compatible 标头不区分大小写；不过，它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的话，它不起作用
2、content的内容是IE=8，或者IE=edge等值，注意不是IE8或者直接写个edge的值，否则不起作用

更为具体的实践与解释参见如下文章：

！感谢：浅析网页meta标签中X-UA-Compatible属性的使用-[闷音]

浅析网页meta标签中X-UA-Compatible属性的使用

今天有一个做开发的朋友突然问你知道很多网站上面加入的X-UA-Compatible属性的意义么？其实这个在以前还专门花了一点时间来验证我自己的想法，结果也确实如自己所预想的那样，八九不离十，当然有一点点的偏差。我做的项目中也并不是每个项目中都使用该属性。那么我们首先来看看几个知名站点，他们也使用了这个

上面时淘宝的，下面是百度的。

都可以发现在head中又一个meta，里面有一个X-UA-Compatible的属性，而且确实非常多的网站中在使用。当然也有很多网站是在开发的时候不管三七二十一给加上去的，理由可能就是看到别人在用。而我这位朋友问的恰好就是这个，他跟我一样，非常喜欢知根知底，我觉得这对于开发来讲是好事；因为再简单的东西深入一点总会更好的。

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

就是上面的一小段，那么他到底有什么用了？其实你可以百度下“IE=edge,chrome=1”，绝对能发现很多相关的文章，但那些文章只是复述人家的话，那些写文章的也许根本就没有尝试。比如解释最多的就是“强制浏览器的渲染方式，默认使用chrome来渲染，然后再按照IE该浏览器的最新版本来渲染”，类似这样意思的观点最多了，而且是点到为止。

当然，这样解释并没有方向性的错误，但是对于很多想了解这个东西的人来讲，看了这个要么不知道是说啥，要么就可能会误解，比如误解成加入这个不管是IE哪个版本都可以渲染成chrome（想想都觉得不现实嘛，如果这样岂不是逆天了，微软得哭晕在厕所，谷歌和开发者们会半夜都笑醒的）。

那么这篇文章我仅针对以上IE=edge,chrome=1来说事情，其他的属性值请自行根据我下面的思路百度或Google自己理解消化。上面那个解释没有方向性的问题，确实是关于浏览器渲染问题，而且也确实是可以渲染IE成Chrome。

但这里就不得不提Google的一个项目，那就是Chrome Frame（项目主页，需要FQ），这个项目就是在不改变IE的外观情况下使用Chrome内核，就好比如果IE是个人，那么这个人的四肢不变，但把大脑给换了一样。而上面的写法跟这个项目是有关系的，但是我们现在去访问这个页面会显示“Google Chrome Frame is no longer supported and retired as of February 25, 2014.”，也就是说在2014年的时候就已经不提供支持服务了。

因此上面概况起来的意思是什么了？我觉得如果用谁都听得懂的话来说就是以下几个要点：

X-UA-Compatible确实是为了我们定义浏览器的渲染方式的；
如果存在客户端Chrome Frame并启用，那么浏览器访问页面会被Chrome内核渲染（这一点没太大意义，因为你开发的项目不能要求用户在客户端来安装Chrome Frame）；也就是说IE浏览器变身Chrome是可以的，但前提是客户端安装了Chrome Frame，呵呵；
使用IE内核浏览器来访问，会渲染至该浏览器的最高版本，比如你使用IE9浏览器，那么就算在兼容模式切换至IE7，但仍会渲染成IE9的样子（当然IE7浏览器是不会渲染成IE9的,不然想想都好美丽）。

比如现在我在客户端装了Chrome Frame，然后我的IE浏览器是IE11，也就是说我服务器端已经设置了X-UA-Compatible属性的值为IE=edge,chrome=1，客户端已经安装并启用Chrome Frame。我现在用IE浏览器打开指定网页。

咦，竟然在IE浏览器下看到了审查元素，而且点击审查元素出现了在Chrome下几乎一样的控制台。

这个过程就是这样子啦，就如上面所说，其实呢X-UA-Compatible还有各种其他的写法，这里就不再说了，可以按照上面的流程来尝试，然后必然或多或少会有一点自己的理解和收获。我个人认为借鉴学习是必要的，但一定要有自我消化的意识，大家共勉吧！

转载请注明出处：浅析网页meta标签中X-UA-Compatible属性的使用 - 微构网络

关于viewport，看起来还是比较繁琐的，接下来就直接转载几篇文章，参考借鉴：

！感谢：关于HTML5中meta name="viewport" 的用法-[zz-hello]

关于HTML5中meta name="viewport" 的用法

移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。

在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西。

还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

所以在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，我们可以将页面的宽度固定，然后获取设备的宽度，可以得到我们之前设定的宽度与设备宽度的比例，再使用HTML5新增的viewport来对页面进行缩放，并固定不允许用户再重新缩放。

在看viewport的具体用法之前，我们先搞清楚几个概念。

layout viewport：
- layout viewport 是网页的所有内容，他可以全部或者部分展示给用户。
visual viewport
- visual viewport 就是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。

不太懂的看下图就知道了：

viewport具体用法为:
使用该meta标签时，在content中写属性，用逗号隔开

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />

属性名	备注
width	设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
–	–
target-densitydpi	值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个；安卓中支持，当 target-densitydpi=device-dpi 时， css中的1px会等于物理像素中的1px。

最后一个属性为安卓特有，并且安卓已经决定要废弃target-densitydpi 这个属性了，所以这个属性我们要避免进行使用。

下面我们来看看移动端布局具体的代码：

<head>
<title>Test Page</title>
<script>
    var deviceWidth = parseInt(window.screen.width);  //获取当前设备的屏幕宽度
    var deviceScale = deviceWidth / 640;  //得到当前设备屏幕与640之间的比例，之后我们就可以将网页宽度固定为640px
    var ua = navigator.userAgent;
    //获取当前设备类型（安卓或苹果）
    if (/Android (\d+\.\d+)/.test(ua)) {
        var version = parseFloat(RegExp.$1);
        if (version > 2.3) {
            document.write('<meta name="viewport" content="width=640,initial-scale=' + deviceScale + ', minimum-scale = ' + deviceScale + ', maximum-scale = ' + deviceScale + ', target-densitydpi=device-dpi">');
        } else {
            document.write('<meta name="viewport" content="width=640,initial-scale=0.75,maximum-scale=0.75,minimum-scale=0.75,target-densitydpi=device-dpi" />');
        }
    } else {
        document.write('<meta name="viewport" content="width=640, user-scalable=no">');
    }
</script>
</head>

！感谢：程序员不止程序猿

移动端适配之一：到底什么是像素

移动端适配之二：visual viewport、layout viewport和ideal viewport介绍

移动端适配之三：使用meta标签设置viewport

像素是一个经常提到的概念，写CSS的人都经常会用到px作为单位。但是，在移动端，看着分辨率高达1125x2436的iPhone X，在控制台中却只有375x812的分辨率，似乎有点不合逻辑。

屏幕中的分辨率：任何显示设备，如电脑显示器和手机屏幕，其实都是由很多个小点组成的。比如，我的显示器分辨率是1920x1080，就表示显示器横向一共有1920个像素点，纵向一共有1080个像素点，每个像素点都可以单独显示一种颜色。于是，所有像素点显示的颜色加起来，就是我们最后看到的效果。

现在常常会提到4K显示器，就要求屏幕的横向分辨率达到约4000像素，如3840x2160或4096×2160。很明显，对于大小相同的屏幕，分辨率越高，像素点越多，每个像素点也就越小，成本也就越高。但是，分辨率高的最直观感受，就是可以看更高清的图片和视频，显示会更加清晰。

图片和视频中的像素：与上面类似，图片和视频中的分辨率，也是描述横向和纵向分辨有多少个像素点。每个像素点表示一种颜色，所有颜色显示出来，就是一张图片。理论上，可以用数字完全描述一张图片，如下面的例子：

每个像素点上的颜色，都用一个色值表示，如果图片分辨率为400x300像素，那么横向就有400个值，纵向是300个值。

物理像素与设备独立像素：对于一台显示器或手机，其实是有2个分辨率的，这两个分辨率是不同的，但也是相关的。

上面所解释的屏幕中的分辨率，其实都是

上面所解释的屏幕中的分辨率，其实都是

物理像素，

也就是厂家在生产显示设备时就决定的实际点的个数。上面提到，对于不同的设备而言，物理像素点的大小是不一样的，这样就会带来问题：举个例子，21英寸显示器的分辨率是1440x1080，5.8英寸的iPhone X的分辨率是2436×1125，我用CSS画一条线，其长度是20px，如果都以物理像素作为度量单位，那么在显示器上看起来正常，在iPhone X屏幕上就变得非常小，不是我们想要的结果。所以呢，为了解决这个问题，还需要一个新的度量单位，这个度量单位必须是与设备无关的，采用这个单位，无论在何种设备上，相同长度的线看起来都应该差不多，这就是

设备独立像素(device-independent pixels, dips )。

我们在CSS中用的

CSS像素，

其实就是一种设备独立像素，在Android或IOS开发中，人家就不能叫CSS像素了，不过意思还是一样滴~

物理像素可以理解为硬件设备，设备独立像素可以认为是程序员控制显示器的接口，中间会经过操作系统来将设备独立像素转换成物理像素，用实际的物理像素点来显示。所以，在编程中能获取到的都是设备独立像素，如CSS中的获取的所有像素都是设备独立像素，而物理像素对于程序员来说是透明的。

物理像素是在出厂时就决定的，但是设备独立像素其实是可调的。大家用电脑的时候，应该都试过调整分辨率，此时调整的实际就是设备独立像素。

在设备中查看:厂家在宣传自己的产品时，往往会拿物理像素说话，因为物理像素才会代表其工艺水平，才会吸引用户花更多的钱去买。对于物理像素，一般在产品的官网参数里面都可以看到，也可以在属性中查看。如对于我的Mac笔记本，在关于本机->显示器中可以看到如下的信息，其物理分辨率大小为2560 x 1600。要查看显示器的设备独立像素，作为写前端的人，打开浏览器，再打开控制台，敲一下代码：

screen.width screen.height

对于我的Mac，得到的值为1440 x 900。对于手机，物理像素可以在手机说明书或者官网的参数配置中查到，而设备独立像素打开控制台选择对应机型后就可以看到：

不管何种设备，一般都满足：设备独立像素 <= 物理像素

visual viewport：这个是浏览器给我们用的、能真正用来显示网页内容的区域，可以通过下面的js命令获取：

window.innerWidth
window.innerHeight

前端里面能获取到的像素基本上都是CSS像素，所以这个的单位也是CSS像素。对于iPhone X，浏览器全屏状态下，其window.innerWidth的值为375。

screen.width和screen.height，主要是用来获取整个屏幕的大小的，而window.innerWidth和window.innerHeight 只是获取浏览器可用显示区域的大小，也就是浏览器中间负责显示的部分。当浏览器全屏时，要去掉状态栏、标签栏、任务栏等区域，当浏览器非全屏时，其值更小。由于在移动端，浏览器一般都是全屏的，所以大多数情况下，screen.width与window.innerWidth的值相等，也有的博客中说用 screen.width和screen.height，来获取visual viewport的大小，就是这个原因。

visual viewport是我们可以直观看到的，不严谨的说，就是差不多等于手机屏幕的大小，偏向于一个物理概念。

layout viewport：网页最早是出现在电脑上的，上一篇博客中提到，电脑的物理像素可能比手机还要低，但是电脑的设备无关像素（或者说是分辨率吧，更严谨一些）是明显大于手机的设备无关像素的，毕竟电脑的屏幕尺寸远比手机大啊。那些在电脑上的网页，如果没有经过专门的优化，直接搬到手机上看，那么问题就来了，网页会被挤得变形，相信这种问题大家都遇到过。所以呢，手机厂商为了解决这个问题，设置了一个layout viewport。

这是一个虚拟的窗口，其大小比手机屏幕大，加载网页时，直接把HTML渲染在这个虚拟的窗口中，这样就不会样式错乱了。在查看的时候，毕竟手机的visual viewport小啊，那就只能通过滚动条来看了。

Layout viewport的大小可以通过document.documentElement.clientWidth和document.document.clientHeight，实际使用中可能会有一些兼容问题，这跟DOCTYPE声明有关。不同浏览器的layout viewport大小不同，常见的有980px、1024px。

ideal viewport：Layout viewport是为了能将电脑上的网页正确的显示到手机上。当浏览器拿到一个网页时，首先会渲染到这个layout viewport里面。可是现在有很多网页会针对手机做专门的设计，比如现在的一些H5活动页，设计的尺寸就是在手机上看的。此时如果还是把网页渲染到这个大的layout viewport上，实在是有点不合适了。所以，还应该有个ideal viewport，这个ideal viewport应该与手机屏幕大小的相同，确切来说，等于visual viewport的大小。把页面渲染到这个ideal viewport里面，就能在visual viewport中完美显示。

meta标签：meta标签里面的内容，主要是提供关于这个HTML页面的元信息的。简单点说，就是你用这些信息来告诉浏览器，应该如何解析这个HTML文件。比如

<meta charset="UTF-8">

这个标签是告诉浏览器，该HTML文件的字符编码格式是utf-8。当浏览器解析该HTML文件时，由于meta标签位于头部，会先获取到这个信息，然后浏览器就用这个utf-8编码来解析这个HTML文件中的字符。当然，除了上面这种简单的格式外，meta标签更常见的是这种name + content 的形式：

<meta name="format-detection" content="telephone=no">

name属性的值告诉浏览器，这个meta标签设置的是<code>format-detection</code>，其具体值是content中的<code>telephone=no</code>，即忽略将数字识别成电话号码。

viewport的设置：用meta标签就可以调整layout viewport的大小。上网去搜移动端适配，一定会看到下面这句代码：

<meta name="viewport" content="width=device-width, user-scale=no, initial-scale=1.0, maximum-scale=1.0, mimimum-scale=1.0">

回到应用场景，我们用这个标签的主要目的是做移动端的适配，一般都是做一个专门为移动端设计的页面。所以，我们在设置layout viewport时，当然希望这个viewport的尺寸等于ideal viewport。需求已经明确了，接下来看看我们如何利用上面表里的属性来实现。

利用width：<meta name="viewport" content="width=device-width">

这个width，就是用来设置layout viewport的宽度。我们设置其值为device-width，也就是设置成设备的实际宽度。而ideal viewport的宽度是与设备的宽度相等的，所以，这句代码就把viewport设置成了ideal viewport的大小。可以分别用<code>window.innerWidth</code>和<code>document.document.clientWidth</code>查看：

当然，只要你高兴，也可以设置成别的值，比如把宽度设置成1000，那么layout viewport就会比visual viewport大，浏览时会有一个滚动条。具体实现时，代码上最好加上<code>initial-scale=1.0</code>，防止浏览器对页面进行缩放。

利用scale：<meta name="viewport" content="initial-scale=1.0">

<code>Initial-scale</code>用来设置初次加载页面时layout viewport相对于ideal viewport的大小。具体计算公式是：

layout viewport = ideal viewport / scale
scale = ideal viewport / layout viewport

需要注意的是，利用scale设置，无论计算出来的layout viewport的值大小如何，最后都会被浏览器自动缩放到与visual viewport大小相等，并不会出现滚动条。具体看下面的例子，我们设置的红框大小为100x100px，字体大小为32px。

initial-scale=1.0：设置scale值为1.0，那么layout viewport的大小与ideal viewport大小相等：

此时红框显示出来的大小就是100px，字体大小也就是32px。

initial-scale=0.5：设置scale值为0.5，那么layout viewport的大小就是ideal viewport的两倍，即750px：

但是浏览器会把layout viewport进行缩放，从而达到与visual viewport大小适配。对于已经是visual viewport750px的layout viewport，需要缩放到以前的0.5倍，才能正好适配375px。所以，100px的红框看起来只会有50px的大小，字体也会对应的缩小一半。如果设计图的大小是750px，那么样式大小完全可以按照设计图来写，最后只要设置scale为0.5，视觉上的效果就是缩小后的。

这里用window.innerWidth打印出来的visual viewport大小不对，用screen.width打印出来是对的，具体原因网上也没查到。有知道的同学欢迎在评论区留言~

initial-scale=2.0：设置scale的值为2，那么layout viewport的大小就是ideal viewport的一半，即188px：

同样的，浏览器会自动缩放。本来是188px的layout viewport，需要放大两倍，才能填满visual viewport。此时，100px的红框会被放大成200px，字体大小会放大到64px。

同时使用：width和scale两种方式都可以实现，但是兼容性不同。我们的目的，是为了把layout viewport设置成ideal viewport的带下。为了能兼容所有的设备，就有了下面的方案：

<meta name="viewport" content="width=device-width, user-scale=no, initial-scale=1.0, maximum-scale=1.0, mimimum-scale=1.0">

如果两者设置的大小不一样，那么会取较大者。设置width为device-width，然后再设置缩放值为1，就完全限制了layout viewport的大小为visual viewport了。其他的属性，都是来控制缩放的。其实，设置了<code>maximum-scale=1.0, minimum-scale=1.0</code>就相当于设置了<code>user-scalable=no</code>了。如果不禁用缩放，那么layout的viewport的大小在缩放时还是会变的。

小结：用viewport的目的，是为了设置layout viewport的大小，从而保证能在移动端设备上合适的显示出来。

HarryVan