1、在head里面加入这句话:<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
2、导航采用百分比的方式
如果不想手写,可以尝试使用现有的比较优秀的框架,如jquerymobile、pintuer、bootstrap等等
设置宽高100%
书店里面有书卖。要不然当当也行。
强制不显示滚动条
用js获取浏览器的宽高 你这样试试
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<style>
* {padding:0px;margin:0px;}
html,body {width:100%;height:100%;overflow:hidden;}
#box {height:100%;width:100%;padding:80px 0px 40px 0px;}
#top{background:#33ff00;width:100%;height:80px;position:absolute;top:0px;left:0px;}
#main {background:#ff0;padding-left:200px;position:relative;}
#bottom{background:#33ff00;width:100%;height:40px;position:absolute;bottom:0px;left:0px;}
#left{height:100%;width:200px;position:absolute;left:0px;background:#f0f;}
#right {background:#0ff;}
</style>
<script>
window.onload=function(){
//var box = document.getElementById("box");
var h = document.body.clientHeight - 120;
var w = document.body.clientWidth - 200;
var main = document.getElementById("main");
main.style.height = h + "px";
var right = document.getElementById("right");
right.style.height = h+"px";
right.style.width = w+"px";
}
</script>
</head>
<body>
<div id="box">
<div id="top"></div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="bottom"></div>
<div>
</body>
</html>
</div>