<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。
其中：
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例
如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
这样子写后，就可以把一些页头横幅等的图片的宽度都设置成style="width:100%"，整个页面在设备上看起来就是全屏的了。
设置meta
mobile默认会像PC上的浏览器一样渲染页面（默认的页面宽度是980px，这个值是可以通过viewport的width属性设置的），然后同比缩放以适应mobile的小屏幕（缩放比例可以通过minimum-scale和maxmum-scale进行设定），因此用户在mobile看这个页面时感觉字体就比较小了，也比较模糊，必须要放大才能看得真切。但是我们可以通过设置viewport来解决，viewport有如下几个属性:
width设置viewport的宽度，即mobile最初模拟PC浏览器的宽度，之后mobile会这个宽度展现的页面同比缩放到mobile屏幕上。设置width=device-width后就不会再进行缩放了，因为宽度正好和mobile的宽度相同（前提是没有设置缩放比例）。
minimum-scale和maximum-scale是控制用户允许设置的缩放比例的。
user-scalable标识是否允许对页面进行缩放，取值有两个yes和no。设置为no则不允许进行页面缩放了。
initial-scale设置 用户最初看到页面时的缩放比例。 我们可以直接在html页面设置好，也可以通过JavaScript来设置，Tangram Mobile实现了相应的设置方法，
baidu.page.setNoScale 设置页面默认不缩放，并且不可缩放
设置media
我们可以利用link标签的media属性来限制CSS的应用范围，通过max-device-width：480px 屏蔽PC；通过only screen屏蔽屏幕阅读设备； 通过orientation: portrait来区分横屏竖屏，
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }
@media screen and (min-width: 400px) and (max-width: 700px) { … }
设备翻转状态
通过获取orientation的值来判断翻转状态，那如果设备不支持orientation怎么样，那我们可以通过 innerWidth和innerHeight的比例来判断翻转状态，代码如下（取自Tangram Mobile的getOrientation）:
baidu.page.getOrientation = function() {
if ("onorientationchange" in window) {
return (window.orientation == 0 || window.orientation == 180) ? 'portrait' : 'landscape';
} else {
return (windows.innerHeight > windows.innerWidth) ? 'portrait' : 'landscape';
}
};