1、页面头部声明如下，此声明初始化页面不可移动，不可缩放，可以自动重力感应。
<!DOCTYPE html>
<html>
<head>
<metahttp-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection"content="telephone=no"/>
2、页面最外层div可以用最大宽度来实现：
.main{ background:#fff; margin:0 auto;position:relative; max-width:640px;}
尽量不要使用@media only screen and (min-device-width : 320px) and(orientation:portrait) {}和@media only screen and (min-device-width : 640px) and(orientation:landscape) {}}来实现横屏纵屏，这样会导致安卓2.3以下版本在输入状态下整个网页放大。
可以使用@media screen and (min-width:480px) {} @media screen and(min-width:640px) {}来规定当屏幕大于多大尺寸的时候应用什么样式。
3、手机版wap一般通用字体font:1em'microsoft yahei',Verdana,Arial,Helvetica,sans-serif;这种写法会适应多种屏幕的尺寸，字体会随着屏幕缩放。
4、页面背景美观又不会影响访问速度可以使用css3背景渐变：
body {
height:100%;
background-image:-webkit-gradient(linear, 0 0, 0 100%,from(#4E94C4), to(#EFF8FF));
background-image:linear-gradient(#4E94C4,#EFF8FF);
background-image:-moz-linear-gradient(#4E94C4,#EFF8FF);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,EndColorStr='#EFF8FF', StartColorStr='#4E94C4')
}
5、a链接去掉下环线以及数遍点击效果，input，select去掉默认点击边框光标，a,button,input,select{ outline:none;}
6、图片缩放宽度不要固定img { max-width: 100%; -ms-interpolation-mode: bicubic; }，可以给img宽度加上百分比。
7、导航部分机构：（此机构可以实现缩放文字居中两边靠左）
<div class="iepai_header">
<i class="a_l"><ahref="index.html" target="_blank" rel="external nofollow" ><img src="images/black.png"/></a></i>
<b>我的爱易拍</b>
<iclass="a_r"><a href="login.html" target="_blank" rel="external nofollow" ><imgsrc="images/sc.png"/></a></i>
<divclass="clear"></div>
</div>
样式如下：
.iepai_header { width:100%; height:45px;line-height:45px; text-align:center; position:relative; }
.a_l{ position:absolute; left:10px; top:3px;}
.a_r{ position:absolute; right:10px; top:3px;}
8、左右结构的输入框自适应100%，代码机构如下：
<div class="inputArea">
<div class="inputLine">
<div class="il">帐号：</div>
<div class="ir"><input id="zh"type="text" name="uname" value=""placeholder="请输入Email 或电话号码" autocapitalize="off"autocomplete="on"></div>
</div>
<div class="inputLine">
<div class="il">密码：</div>
<div class="ir"><input id="mm"type="password" name="pwd" value=""placeholder="请输入密码"></div>
</div>
</div>
样式如下：
.inputArea {
background:#fff;
border:1pxsolid #628aa5;
-webkit-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:01px 5px #acaeaf inset,0px 1px 1px rgba(255,255,255,0.5);
box-shadow:01px 5px #acaeaf inset,0px 1px 1px rgba(255,255,255,0.5)
}
.inputLine {
color:#000;
padding:7px10px;
clear:both
}
.inputLine:first-of-type {
border-bottom:1pxsolid #cfcfcf
}
.il {
float:left;
padding:5px0
}
.ir {
overflow:hidden;
text-align:left;
padding:0
}
.ir input {
-webkit-appearance:none;
width:98%;
font-size:14px;
vertical-align:middle;
border:solid1px #ccc;
padding:5px0
}
9、左右结构的文字换行考右对齐代码结构如下：
<li>
<i class="title_tit1">详细地址：</i>
<i class="title_content1">振华西路设计之都振华西路设计之都振华西路设计之都振华西路设计之都振华西路设计之都</i>
<divclass="clear"></div>
</li>
样式如下：
. title_tit1{float:left;}
.title_content1 { display:block;overflow:hidden;}
10、弹出层半透明居中：
<div class="error">
<div class="error_bg"> </div>
<div class="error_txt">用户名输入错误，请重新输入！</div>
</div>
样式如下：
.error{position: absolute; left: 0; top: 0;right: 0; bottom: 0; margin: auto;width:300px; height:80px; z-index:999;}
.error_bg{
width:300px; height:80px;
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
background:#000;
position:relative; }
.error_txt{ color:#fff; width:300px;height:80px; text-align:center; line-height:80px; position:absolute; left: 0;top:0;}
![一个小小的移动web版音乐播放器[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)