标签：
一、设置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>
CSS pixels： 浏览器使用的抽象单位， 主要用来在网页上绘制内容。
device pixels： 显示屏幕的的最小物理单位，每个dp包含自己的颜色、亮度。
#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);} }
标签：
原文地址：http://www.cnblogs.com/kiscall/p/4742551.html
