说明:
①:H5自适应不同分辨率的设备,其实主要就一句
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
width=device-width 屏幕宽度;initial-scale=1 原始缩放比例为1,即100%铺满;minimum-scale=1 最小缩放比例为1;maximum-scale=1 最大缩放比例为1;user-scalable=no 禁止页面缩放。有些浏览器支持不一样,所以若想禁止缩放,就把最大最小缩放比例设为1即可!
②:字体单位使用rem,尽量不使用px,rem能等比适应所有屏幕。使用rem的优缺点,有详细介绍 http://isux.tencent.com/web-app-rem.html
③:dpr分屏,动态修改meta标签内容
下面试代码,有详细注释
<!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>移动h5自适应布局</title> <style> /*320px布局*/ html{font-size: 100px; /*根字体100px, 即1px = 0.01rem*/} body{font-size: 0.14rem;/*实际相当于14px*/} body{ padding:0; margin:0; } .div2{ font-size:0.14rem; } .div3{ width:3rem; height:3rem; border:1px solid #000; box-sizing:border-box; } .div4{ margin-top:0.1rem; width:2rem; height:2rem; border:1px solid #000; box-sizing:border-box; } .img1{ width:3.2rem; } </style> </head> <body> <div class="div2">动态更改html元素大小</div> <div class="div3"></div> <div class="div4"></div> <img class="img1" src="http://www.baidu.com/img/bdlogo.png" alt="" /> </body> <script> // 该代码来自http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/ (function (doc, win) { // 分辨率Resolution适配 自适应 var docEl = doc.documentElement, //判断浏览器是否支持orientationchange改变方向的函数 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { //客户端窗口的(逻辑)宽度,逻辑像素=物理像素/2 如:iphone6 (750/2=375) var clientWidth = docEl.clientWidth; if (!clientWidth) return; // 把document的fontSize大小设置成跟窗口成一定比例的大小,从而实现响应式效果 由rem转换到px docEl.style.fontSize = 100 * (clientWidth / 320) + 'px'; }; // 如果浏览器不支持addEventListener函数就终止 if (!doc.addEventListener) return; //addEventListener()多次绑定同一事件 参数(事件名,要执行的函数,处理程序的阶段) //如果浏览器不支持orientationchange改变方向的函数,则返回resize,会执行recalc函数 win.addEventListener(resizeEvt, recalc, false); //绑定浏览器缩放与加载时间 doc.addEventListener('DOMContentLoaded', recalc, false); /*dpr分屏,动态修改meta标签内容*/ // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签 (function(){ return; var dpr = scale =1; var isIPhone = win.navigator.appVersion.match(/iphone/gi); //获取到当前设备的dpr var devicePixelRatio = win.devicePixelRatio; if (isIPhone) { // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ dpr = 2; } else { dpr = 1; } } else { // 其他设备下,仍旧使用1倍的方案 dpr = 1; } scale = 1 / dpr; // js动态写meta标签 var metaEl = ""; metaEl = doc.createElement('meta'); //设置viewport,进行缩放,达到高清效果 metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); if (docEl.firstElementChild) { //动态写入样式 docEl.firstElementChild.appendChild(metaEl); } else { var wrap = doc.createElement('div'); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); } })(); })(document, window); </script> </html>
运行结果: