为兼容移动端基于webkit内核的Meta

返回 使用微信阅读
请用微信扫一扫
Jack

最近,由于工作需要研究了移动平台的前端页面。

移动平台前端开发是指针对高端智能手机(如iPhone、Android)做站点适配也就是WebApp,并非是针对普通手机开发Wap 2.0。

因为这些高端智能手机(iPhone、Android)的内置浏览器都是基于webkit内核的,所以在开发WEBAPP时,多数都是使用HTML5和CSS3技术做UI布局。

本人曾尝试过2种做法:

1、页面按一般web开发的方式写,也就是说页面的宽度还是980或者960,通过使用私有meta标签实现按比例缩小为手机全屏。该方法是原有的站点上添加meta就能实现,成本低。但是,这个法子并不好,页面被整体缩小。

webkit内核中的一些私有的meta标签:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"name="viewport"/>
<meta content="yes"name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content=”default” name=”apple-mobile-web-app-status-bar-style” />
<meta content=”black-translucent” name=”apple-mobile-web-app-status-bar-style” />
<meta content="telephone=no"name="format-detection"/>

第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;

1)width : 控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(单位为缩放为100%的CSS的像素)(范围从 200 到 10,000 ,默认为 980 像素 )

2)height : 和width相对应,指定高度(范围从 223 到 10,000 )

3)initial-scale : 初始缩放比例,页面第一次加载时的缩放比例(范围从>0到 10 )

4)maximum-scale : 允许用户缩放到的最大比例,范围从0到10.0

5)minimum-scale : 允许用户缩放到的最小比例,范围从0到10.0

6)user-scalable : 用户是否可以手动缩放,值可以是:①yes、 true允许用户缩放;②no、false不允许用户缩放

第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;

第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式(default,black,black-translucent);

第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码。

2、页面宽度设置为640(iphone手机、部分android的4寸屏的手机均是这个分辨率),再设置meta,该方法页面刚好在640的屏幕全屏。

<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">

本文只是个人的经验,如有错误,欢迎指出与交流。

阅读数  44383