首先需要在网站的meta信息里面加上：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
其次对于网页居中问题要注意css样式代码的问题：
* {margin:0 auto;padding: 0;border: 0;-webkit-user-select: text}
另外对于网页的初始宽度可以适应max-width来控制，其他容器也是类似，要避免直接出现定义body体的宽度。
附件：
网页参考源码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <title>Bootstrap 101 Template</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="css/main.css" rel="stylesheet"> </head> <body> <div id="top" class="">这是顶部信息</div> <div id="nav">这是导航栏 <div id="">菜单</div> <div id="">左边</div> <div id="">右边</div> </div> </body> </html>
CSS文件：
* {
margin:0 auto;
padding: 0;
border: 0;
-webkit-user-select: text
}
/*头部*/
#top {
max-width:680px;
background-color:red;
}
#nav {
max-width:680px;
background-color: bisque;
}
.menu {
max-width:680px;
background-color: brown;
}
.cleft {
width: 60%;
min-height: 400px;
float: left;
background-color: #5FAD7E;
}
.cright {
width: 40%;
float: left;
min-height: 400px;
background-color: chocolate;
}
/*清浮动*/
.clearfix:before, .clearfix:after {
content:".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* IE < 8 */
.fl {
float:left;
}
.fr {
float:right;
}
