初识WEB移动端开发

一、设置meta标签

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no;" />见文知意
<meta name="apple-mobile-web-app-capable" content="yes"/>允许全屏模式浏览
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>状态条样式
<meta name="format-detection" content="telephone=no" />忽略数字识别为电话号码
<meta name="format-detection" content="email=no" />安卓自动禁用，IOS不会自动识别邮件地址

<meta name="viewport" content=" height = [ pixel_value |device-height] , width = [ pixel_value |device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable =[yes | no] , target- densitydpi = [ dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi] " />

二、使用百分比布局，使用rem单位和mediaQuery

html {
    font-size: 62.5%; /* 10÷16=62.5% */
}
@media only screen and (min-width: 481px){
    html {
        font-size: 94%!important; /* 15.04÷16=94% */
    }
}
@media only screen and (min-width: 561px){
    html {
        font-size: 109%!important; /* 17.44÷16=109% */
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 125%!important; /* 20÷16=125% */
    }
}

meidaQuery可用直接用在样式表里，也可以用在link标签中；

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">    // 肖像模式样式
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"   // 风景模式样式
//竖屏时使用的样式
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>
//横屏时使用的样式
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style> 

为提高页面适应性，可以使用百分比布局、设置box-sizing属性、使用display:table-cell表格布局等方法；常见布局方式：流体布局，固定布局，表格布局，百分比布局，混合布局，弹性布局等。

三、浅谈屏幕

DPI怎么计算呢？DPI也叫PPI。

PPI：PPI全称为Pixel Per Inch，译为每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。

像素：

• CSS pixels： 浏览器使用的抽象单位， 主要用来在网页上绘制内容。
• device pixels： 显示屏幕的的最小物理单位，每个dp包含自己的颜色、亮度。

120-160属于低分屏；

160-240属于中分屏；

240-320属于高分屏；

320以上数据超高分屏，也就是传说中的retina屏幕；

开发过程中应该根据dpi设置mediaQuery的比例或者图片，例子：

#header {
background:url (medium-density-image.png);
}
@media screen and (- webkit -device-pixel-ratio:1.5) {
/* CSS for high-density screens */
#header { background:url (high-density-image.png);}
}
@media screen and (- webkit -device-pixel-ratio:0.75) {
/* CSS for low-density screens */
#header { background:url (low-density-image.png);}
}