1.手机网页的测试方法
a.直接在手机上测试，比较麻烦，效果好
b.电脑上下载手机模拟器
c.利用浏览器自带功能
2.name=“viewport”，屏幕设定
3.maximum-scale=1.0， minimum-scale=1.0； initial-scale=1.0最大最小缩放比例为1，其实就是不允许缩放
3.user-scalable=0，width=device-width：设定内容和设备的屏幕等宽，等高
<DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>移动端页面<title>
<meta name="viewport" content="maximun-scale=1.0,minimun-scale=1.0,user-scale=0,width=device-width,initial-scale=1.0">
<style type="text/css">
header{width:100%;height:50%;background:#AEFEEE}
asider{width:20%;height:540px;background:#708099;float:left;}
section{width:80%;height:540%;background:#D8DFD8;float:left;}
footer{width:100%;height:50px;background:#green;clear:left;}
figure{padding：0px}
img{max-width：70%}
ul{list-style-type：none}
li{display：inline}
a{text-decoration：none}
</style>
</head>
<body>
<header>
<hgroup>
<img src="imges/ss.png" >
<h4>移动端页面<h4>
</hgroup>
</header>
<asider>
<ul>
<li><a href=""><img src="imges/aa.png" ></a></li>
<li><a href=""><img src="imges/bb.png" ></a></li>
<li><a href=""><img src="imges/cc.png" ></a></li>
<li><a href=""><img src="imges/dd.png" ></a></li>
</ul>
</asider>
<section>
<figure>
<img src="sp/sp1.png" width="50%"><img src="sp/sp2.png" width="50%">
</figure>
<figcaptio>食品/家电</figcaptio>
<figure>
<img src="sp/sp3.png" width="50%"><img src="sp/sp4.png" width="50%">
</figure>
<figcaptio>汽车/家居</figcaptio>
<figure>
<img src="sp/sp5.png" width="50%"><img src="sp/sp6.png" width="50%">
</figure>
<figcaptio>数码/珠宝</figcaptio>
<figure>
<img src="sp/sp7.png" width="50%"><img src="sp/sp8.png" width="50%">
</figure>
<figcaptio>食品/家电</figcaptio>
</section>
<footer>
<nav>
<ul>
<li><a href=""><img src="imges/1.png" ></a></li>
<li><a href=""><img src="imges/2.png" ></a></li>
<li><a href=""><img src="imges/3.png" ></a></li>
<li><a href=""><img src="imges/4.png" ></a></li>
</ul>
</nav>
</footer>
</body>
</html>
原文：http://www.cnblogs.com/piaopiaoppp/p/5281510.html