jacall.net
前端开发工作者
© JaCall.Net
All Rights Reserved.
皖ICP备13004974号-1

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;}
2013-07-12
5,432 views

发表回复