MobileWeb_浏览器自动缩放控制

 

目的

针对 iPhone 和 Android 的浏览器（Mobile Safari/WebKit）设计的网页，本身在内容布局和外观上都专门做了优化，比如合适的内容块位置以及字号。
我们希望页面能按照原样呈现，而不被浏览器自动缩放。

方法

在html 或jsp 文件上添加:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />
meta是用来在HTML文档中模拟HTTP协议的响应头报文.

解析

width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
target-densitydpi Android 浏览器所需要的，因为 Android 硬件设备标准不一， 其中同样物理尺寸的屏幕，可能因为 dpi 的不同而具有不同的分辨率，
Android 浏览器默认会缩放页面以便最好地呈现， 可惜和 Java 的垃圾回收一样，它很难做到"最好"。所以最好还是人工指定吧。

target-densitydpi 可以设定的值
device-dpi - Use the device's native dpi as the target dpi. Default scaling never occurs. 设备本身的像素
high-dpi - Use hdpi as the target dpi. Medium and low density screens scale down as appropriate 用高像素，中低像素屏幕适当缩小。
medium-dpi - Use mdpi as the target dpi. High density screens scale up and low density screens scale down. 中等像素，高的屏幕放大，低的变小是默认值
low-dpi - Use ldpi as the target dpi. Medium and high density screens scale up as appropriate 低像素，中高像素会适当变大。

css

为了保证当旋转手机，浏览器自动转为宽屏模式时，页面字体也不会被自动放大。

html { -webkit-text-size-adjust: none;}