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">