手机端页面简单制作

浏览数：25 / 时间：2015年06月11日

由于工作需要简单学习并借鉴写了些东西再次分享下，有不妥当地方尽情留言：

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>
大体的布局还是追寻原始的写法，包括按钮、图片需单独设置宽度自适应等等；