标签：
现在移动端尺寸越来越多，如果在不同宽度的设备上完美呈现效果也是前端程序员必备的功课。
通过一天的查找资料跟以前的经验，总结了以下的方案：
1：前端样式固定用320px宽度做，左右留白，背景用颜色或者背景填充。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=1, minimal-ui"/>
图片用实际像素background-size:
2：不写宽度，所有内容以中轴线为标准，左右铺开。
3：写好网页后用JS获取屏幕宽度，然后设置body:zoom（有时字体会有问题）或者scale（只适用于单页）缩放尺寸
设置html的font-size和viewport来控制大小
备注：关于window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips
dip/dp/device independent pixels，设备独立像素）与屏幕密度有关
<script> (function(doc,win){ var docEl=doc.documentElement, isIOS=navigator.userAgent.match(/iphone|ipod|ipad/gi), dpr=isIOS?Math.min(win.devicePixelRatio,3):1, scale=1/dpr, resizeEvt="orientationchange" in window?"orientationchange":"resize"; docEl.dataset.dpr=dpr; var metaEl=doc.createElement("meta"); metaEl.name="viewport"; metaEl.content="initial-scale="+scale+", maximum-scale="+scale+", minimum-scale="+scale; docEl.firstElementChild.appendChild(metaEl); var recalc=function(){ var width=docEl.clientWidth; if(width/dpr>640){ width=640*dpr } docEl.style.fontSize=100*(width/640)+"px"}; recalc(); if(!doc.addEventListener){return} win.addEventListener(resizeEvt,recalc,false) })(document,window); </script>
标签：
原文地址：http://www.cnblogs.com/huangxiaowen/p/4775915.html
