手机端页面开发心得(1)——meta设置

说起手机web开发,首先也可以说最重要的就是在代码中对浏览器进行一些设置,在我看来也可以叫“初始化”,目的就是为了在手机上访问起来体验更好。首先来看下下面这段代码:

 

 

apple-mobile-web-app-capable

这个meta标签是ios设备中的safari私有meta标签,它表示:允许全屏模式浏览,开启对Web Aapp程序的支持。当它设置为“yes”时,就去掉了Safari的一些默认控件,比如地址栏、状态栏之类的。

 

apple-touch-fullscreen

这个标签的意思是添加到主屏幕以后全屏打开,将这个设置为”yes”,并且加上上面的标签。用户将该页保存到桌面打开后,看起来完全就像一个本地app。

 

format-detection

告诉设备忽略将页面中的数字识别为电话号码(telephone=no)或者忽略识别邮箱(email=no)

 

apple-mobile-web-app-status-bar-style

手机顶部的状态栏设置:默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
注意: 若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

 

viewport

由于移动设备的可视范围有限,直接显示用户pc端的页面的样子让用户缩放横向滚动着操作显然是用户体验很差的。这时候我们就可以用viewport来设置页面的一些属性:

width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素,width=device-width 宽度为设备的宽度 )
height: viewport 的高度 (范围从 223 到 10,000 )
initial-scale: 初始的缩放比例 (范围从>0到 10 )
minimum-scale: 允许用户缩放到的最小比例
maximum-scale: 允许用户缩放到的最大比例
user-scalable: 用户是否可以手动缩放

对于这些属性,我们并不需要同时都设置,手机会根据你设置的属性自动推算其他属性值 ,而非直接采用默认值。

 

apple-touch-icon/apple-touch-icon-precomposed

添加图标到屏幕里的有两种属性值apple-touch-icon和apple-touch-icon-precomposed,区别就在于是否会应用iOS中自动给图标添加的那层高光。

由于iPhone以及iPad都有两种分辨率的设备存在,图标的尺寸就需要做4个:144×144(iPad Retina)、72×72(iPad)、114×114(iPhone Retina)、57×57(iPhone)。

可以使用sizes属性来告诉设备该调用哪个图标。

 

apple-touch-startup-image

该标签是用来设置启动画面的,但它不像apple-touch-icon可以指定sizes来告诉设备该使用哪个图片(也有一种说法是在iOS5中已经支持sizes识别了,但没有测试成功),所以只能通过media里的设备分辨率的判断值来识别,而iPhone Retina的分辨率值界于取值之间,所以需要通过webkit的私有属性-webkit-min-device-pixel-ratio:2来鉴别像素密度以进行识别。

启动画面的图片尺寸并非完全等于设备的尺寸,比如iPad2的尺寸是1024×768,但它的启动画面尺寸横向是1024×748,竖向尺寸是768×1004,因为需要减去系统状栏的高度20px,而使用的Retina屏幕的iPhone4以及iPad3则需要减去状态栏的高度40px。

代码示例中是我项目中用到的一些尺寸,可能不是很全,但绝对是网上目前最全的了(当时也是找了好多才拼出了这么多设备的),最后一个是iphone5和5s的,是自己测试成功后加上的,大家放心用吧。

 

手机开发中的meta标签就讲到这里了,这里的都是我觉得开发一些mobile web页面必备的,其他的一些比如说禁止选中文本等都可以在网上查的到的,我就不一一说明了,总之,百度、google都是好老师,遇到不会的就去网上查查,比做伸手党学起东西来要快得多。后续会继续分享一些其他方面的手机端页面开发经验。

欢迎留言