为了确保适当的绘制和触屏缩放，需要在 ＜ｈｅａｄ＞ 之中添加 ｖｉｅｗｐｏｒｔ 元数据标签。
＜ｍｅｔａ ｎａｍｅ＝＂ｖｉｅｗｐｏｒｔ＂ ｃｏｎｔｅｎｔ＝＂ｗｉｄｔｈ＝ｄｅｖｉｃｅ－ｗｉｄｔｈ， ｉｎｉｔｉａｌ－ｓｃａｌｅ＝１＂＞
在移动设备浏览器上，通过为视口（ｖｉｅｗｐｏｒｔ）设置 ｍｅｔａ 属性为 ｕｓｅｒ－ｓｃａｌａｂｌｅ＝ｎｏ 可以禁用其缩放（ｚｏｏｍｉｎｇ）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式并不推荐所有网站使用，还是要看你自己的情况而定！
通俗的讲，移动设备上的ｖｉｅｗｐｏｒｔ就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上（也可能是一个ａｐｐ中的ｗｅｂｖｉｅｗ）用来显示网页的那部分区域，但ｖｉｅｗｐｏｒｔ又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的ｖｉｅｗｐｏｒｔ都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的ｖｉｅｗｐｏｒｔ设为９８０ｐｘ或１０２４ｐｘ（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的ｖｉｅｗｐｏｒｔ的宽度要小的。下图列出了一些设备上浏览器的默认ｖｉｅｗｐｏｒｔ的宽度。
ｃｓｓ中的１ｐｘ并不等于设备的１ｐｘ
在ｃｓｓ中我们一般使用ｐｘ作为单位，在桌面浏览器中ｃｓｓ的１个像素往往都是对应着电脑屏幕的１个物理像素，这可能会造成我们的一个错觉，那就是ｃｓｓ中的像素就是设备的物理像素。但实际情况却并非如此，ｃｓｓ中的像素只是一个抽象的单位，在不同的设备或不同的环境中，ｃｓｓ中的１ｐｘ所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如ｉｐｈｏｎｅ３，它的分辨率为３２０ｘ４８０，在ｉｐｈｏｎｅ３上，一个ｃｓｓ像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从ｉｐｈｏｎｅ４开始，苹果公司便推出了所谓的Ｒｅｔｉｎａ屏，分辨率提高了一倍，变成６４０ｘ９６０，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个ｃｓｓ像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ｌｄｐｉ、ｍｄｐｉ、ｈｄｐｉ、ｘｈｄｐｉ等不同的等级，分辨率也是五花八门，安卓设备上的一个ｃｓｓ像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
＜ｍｅｔａ ｎａｍｅ＝＂ｖｉｅｗｐｏｒｔ＂ ｃｏｎｔｅｎｔ＝＂ｗｉｄｔｈ＝ｄｅｖｉｃｅ－ｗｉｄｔｈ， ｉｎｉｔｉａｌ－ｓｃａｌｅ＝１， ｍａｘｉｍｕｍ－ｓｃａｌｅ＝１， ｕｓｅｒ－ｓｃａｌａｂｌｅ＝ｎｏ＂＞
要把当前的ｖｉｅｗｐｏｒｔ宽度设为ｉｄｅａｌ ｖｉｅｗｐｏｒｔ的宽度，既可以设置 ｗｉｄｔｈ＝ｄｅｖｉｃｅ－ｗｉｄｔｈ，也可以设置 ｉｎｉｔｉａｌ－ｓｃａｌｅ＝１，但这两者各有一个小缺陷，就是ｉｐｈｏｎｅ、ｉｐａｄ以及ＩＥ 会横竖屏不分，通通以竖屏的ｉｄｅａｌ ｖｉｅｗｐｏｒｔ宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 ｉｎｉｔｉａｌ－ｓｃａｌｅ＝１ 解决了 ｉｐｈｏｎｅ、ｉｐａｄ的毛病，ｗｉｄｔｈ＝ｄｅｖｉｃｅ－ｗｉｄｔｈ则解决了ＩＥ的毛病。
参考文档：ｈｔｔｐｓ：／／ｗｗｗ．ｃｎｂｌｏｇｓ．ｃｏｍ／２０５０／ｐ／３８７７２８０．ｈｔｍｌ
