html5移动Web开发实战

1.解决横竖屏字体大小变化

html{
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust:100%;
}

2.移动viewport 设备宽度、禁止缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

3.css3媒体查询

div{background: red;height: 100px;}
@media screen and (min-width: 480px){    // 大于480px green
div{background: green;}
}

4.可以继续使用px 不用em

5.解决古老移动设备浏览器不识别viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="HandheldFriendly" content="true"/>     <!--古老的移动设备不识别viewport属性 PlamOS-->
<meta name="MobileOptimized" content="320">       <!--微软的PocketPC-->

6.解决safari 横竖屏切换字体变大

<script>
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
}
}
document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
}
}
}
</script>