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=)