mobile viewport meta media

<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'; 
    } 
};

 

 

此条目发表在technologys分类目录,贴了标签。将固定链接加入收藏夹。