由于工作需要简单学习并借鉴写了些东西再次分享下，有不妥当地方尽情留言：
1.首先是meta标签要求：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
<meta name="apple-touch-fullscreen" content="yes">
添加到主屏幕“后，全屏显示
<meta content="black" name="apple-mobile-web-app-status-bar-style">
content：默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style 两种风格显示， 状态栏透明。
<meta content="telephone=no" name="format-detection" />
将不识别邮箱告诉设备忽略将页面中的数字识别为电话号码
<link rel="apple-touch-icon" href="custom_icon.png"> <!--ico透明度-->
2.css代码初始化：
body { margin:0 auto; padding:0;color:#666;font-size:0.875em;list-style: none outside none;font-family:Arial, Helvetica, sans-serif;} a { text-decoration:none;color:#666;} body,div, form, h1, h2, h3, h4, h5, h6, input, ul, li, p, table,a {margin: 0;padding: 0;} ul,li{list-style:none;} img {border: medium none;vertical-align: middle;} .clear{clear:both; line-height:0px; height:0px; font-size:0px;} .box{ overflow: visible;padding:3% 3% 2% ; background-color:#e7e7e7;}/*外框设置*/
3.html代码部分实例：
<div class="down"> <div class="downimg"><img src="images/phoneimg.jpg" width="36"/></div> <div class="downup"><a href="#">打开/下载</a></div> <div class="downcon"> <h2>男神女神都爱玩</h2> <p>一分钟记录你的精彩</p> </div> <div class="clear"></div>
</div>
<style type="text/css">
.down{ background-color:#FFF;border:1px solid #d0d0d0;border-radius:8px;margin-bottom:2%;padding:3% 2% 3%;}
.downimg{float:left;margin-right:8px;}
.downimg img{}
.downcon h2{font-size:1em;font-weight:600;line-height:150%;color:#333333;}
.downcon h2 span{color:#333;padding-right:1%;}
.downcon p{font-size:0.75em;line-height:112.50%;color:#333;padding-top:3px;}
.downup{float:right;padding-top:3px;}
.downup a{font-size:1em;line-height:150%;color:#fff;padding:0.375em 0.5em ;display:block; background:url(../images/downupbj.jpg) repeat-x;border-radius:8px;}
.downup a:hover,.phone_centerimg a:hover img,.phone_share a:hover{opacity:0.9;}
</style>
大体的布局还是追寻原始的写法，包括按钮、图片需单独设置宽度自适应等等；
4.Web手机端制作注意事项：
(1)主体宽度百分比 padding margin 值1%=12px
(2)图片宽度百分比
(3)字体百分比 或em line-height：百分比
(4)注意：<style type="text/css ">css后边有个空格手机端的样式会失效
(5)部分不支持标签功能
(6)不要使用<table>标签（小屏幕表现不佳，解析难度很大）
(6)对照表仅此借鉴
5.Web手机端制作成果：
