首先需要在网站的meta信息里面加上：
<metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;"name="viewport"/>
其次对于网页居中问题要注意css样式代码的问题：
*{margin:0auto;padding:0;border:0;-webkit-user-select:text}
另外对于网页的初始宽度可以适应max-width来控制，其他容器也是类似，要避免直接出现定义body体的宽度。
附件：
网页参考源码：
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;"name="viewport"/> <title>Bootstrap101Template</title> <metaname="keywords"content=""/> <metaname="description"content=""/> <linkhref="css/main.css"rel="stylesheet"> </head> <body> <divid="top"class="">这是顶部信息</div> <divid="nav">这是导航栏 <divid="">菜单</div> <divid="">左边</div> <divid="">右边</div> </div> </body> </html>
CSS文件：
*{
margin:0auto;
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;
}
