手机网页开发简单总结

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 {}
　　/*样式代码块*/

} 

 但愿个人分享能给你们一点帮助，提提意见。