手机端网页开发集锦

1，css媒体查询、
<link rel="stylesheet" media="screen and (max-device-width: 799px)" href=" st.css" />//css文档引用设置
@media tv and (min-width: 700px) and (orientation: landscape) { ...}//css里面设置

2，采用新的相对单位 rem 首先设置html的 font-size 为根大小. 
html{ 
font-size:1mm; 
} 
.titleheight{ 
height:10rem; //这里等于10mm 
width:11rem; //这里等于11mm 
}
当 html{ 
font-size:2mm; 
}
.titleheight{ 
height:10rem; //这里等于20mm 
width:11rem; //这里等于22mm 
}其它地方用rem做单位.

3，<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">//主要I是强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。
<meta content="yes" name="apple-mobile-web-app-capable">//这个也是iphone私有标签，允许全屏浏览。
<meta content="black" name="apple-mobile-web-app-status-bar-style">//iphone的私有标签，iphone顶端状态条的样式。
<meta content="telephone=no" name="format-detection">//禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。
<meta content="email=no" name="format-detection">