标签：
1.首先是meta标签
1 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 2 <meta content="yes" name="apple-mobile-web-app-capable"> 3 <meta content="black" name="apple-mobile-web-app-status-bar-style"> 4 <meta content="telephone=no" name="format-detection">
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览，隐藏浏览器导航栏；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码，个别需要识别的话可以这样开启：<a href=”tel:XXXXXXXXXXX″>XXXXXXXXXXX</a>
2.Html5+Css3的使用
因为手机大多数都是高级浏览器，HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。
按钮带有圆角效果，有内发光效果还有高光效果，这样的按钮使用CSS3写是无法写出来的，当然圆角可以使用CSS3来写，但高光和内发光却无法使用CSS3编写，
这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。-webkit-border-image就个很复杂的样式属性。
还有渐变，动画等你能够想象出的各种酷炫狂拽吊炸天的效果。
3.块级化a标签
因为大多数都是触屏手机，要让用户很方便的能点击到标签，建议用42X42。操作对象的大小符合手指的操作，按键的大小设置规范：食指点击的间距 约为7*7 mm， 1mm间距，拇指点击8*8 mm，2mm间距。当前推荐的值为9mm 大小，最小应不小于7mm。
4.自适应布局
在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。页面必须自适应屏幕大小，可以采用流体布局。其它一些小问题可以采用media query，比如对于图片的处理，只要设置宽度，让图片自适应，防止图片变形，当然要兼容的设备分辨率差距很大的时候，需要利用media queries根据分辨率的不同加载不同的图片（需要同一张设置为几种不同的规格）,一是防止小分辨率设备加载大图片浪费流量，二是防止大分辨率设备加载小图片导致的图片模糊问题。
5.适当优雅降级
要做好优雅降级（平稳退化），少用JS，图片，要用户禁止下载JS和图片的时候页面也能体现价值（因为很多APP默认设置为3G下是不自动下载图片等资源的）。
6.字体大小与行间距
不建议使用px/em，而使用rem，虽然它是相对单位，但使用rem单位可以避开很多层级的关系而行间距则直接是采用字体的倍数。为了方便计算，在html元素中常将font-size设为62.5%。注意在chorme是会强制等于12的~
标签：
原文地址：http://www.cnblogs.com/chenjiahao/p/4434753.html
