移动设备3G网站制作的detail

浏览数：30 / 时间：2015年06月11日

说明一下，在此所说的移动设备前端开发是指针对高端智能手机（如Iphone、Android），所以需要对webkit内核的浏览器有一定的了解。

1、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="telephone=no" name="format-detection" />

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

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

第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码其中http://websqq.org/archives/211,已经有详细的介绍。

2、HTML5标签

HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。

3、把a标签转块，扩大可点击范围

在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

4、webkit-box的使用

为达到适配各种手持设备，建议使用自适应布局模式，这样做你的页面都可以在各种移动设备上面，进行良好的体验。然而在web横排布局中，会经常用到float或display:inline-block，但是与webkit-box相比较，后者更容易设置和控制。

5、关闭iOS中键盘自动大写

在iOS中默认情况下键盘是开启首字母大写的功能的，移动版本webkit为 input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。

6、关闭ios中对字体的自动调整