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