手机网页开发简单总结

1.手机屏幕的宽度不统一，我们强制给文档设置一个比例

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

定义：device-width是通知浏览器使用设备的宽度作为可视区的宽度，initial-scale初始的缩放比例，minimum-scale允许用户缩放到的最小比例，maximum-scale允许用户缩放到的最大比例，user-scalable定义是否可以缩放（0为不缩放）。

2.使手机浏览网页时，不启用电话功能，忽视页面上的数字识别为电话，可以做如下设置

<meta name="format-detection" content="telephone=no" />

3.很多人都认为手机网页像pc端网页一样，可以设置字体，其实各个手机系统有自己的默认字体，且都不支持我们最常用的的微软雅黑，所以不是特定需求可以不规定字体，英文字体和数字字体可使用 “Helvetica” ，三种系统(ios、android、winphone)都支持。

4.手机开发有特殊要求时需要单独给元素添加样式，我们在样式里可以这样做

1》.首先头部声明

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

2》.判断设备是横屏还是竖屏

<!--竖屏-->

@media all and (orientation : portrait){      body {}  　　/*样式代码块*/} 

<!--横屏-->

@media all and (orientation : landscape) {    body {}　　/*样式代码块*/}