H5 页面适配所有 iPhone 和安卓机型的六个技巧

1、viewport 简单粗暴的方式：
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
直接设置viewport为320px的1.3倍，将页面放大1.3倍。

为什么是1.3？

目前大部分页面都是以320px为基准的布局，而iphone6的宽度比是375/320 = 1.171875，iphone6+则是 414/320 =
1.29375那么以1.29倍也就约等于1.3了。

REM布局

REM是CSS3新增的一种单位，并且移动端的支持度很高，android2.x+，ios5+
都支持。REM是相对于dom结构的根元素来设置大小，也就是html这个元素。相较于em单位，rem使用上更容易理解及运用。

REM与PX的换算可以查看网址： https://offroadcode.com/prototypes/rem-calculator/
<https://offroadcode.com/prototypes/rem-calculator/>

假设，html我们设置font-size:12px; 也就是说12px相对于1rem，那么18px也就是 18/12 = 1.5rem。

那么我们以320px的设计布局为基准，将html设置为font-size:100px，即100px =
1rem。(设置100px是为了方便计算)那么可以将大部分px单位除以100就可以直接改成rem单位了。

 

1、如果仅仅是适配ip6+设备，那么使用media query就行。

代码如下：
/*320px布局*/ html{font-size: 100px;} body{font-size: 0.14rem /*实际相当于14px*/} /*
iphone 6 */ @media (min-device-width : 375px) and (max-device-width : 667px)
and (-webkit-min-device-pixel-ratio : 2){ html{font-size: 117.1875px;} } /*
iphone6 plus */ @media (min-device-width : 414px) and (max-device-width :
736px) and (-webkit-min-device-pixel-ratio : 3){ html{font-size: 129.375px;} }
这样，在ip6下，也就将页面内的元素放大了1.17倍，ip6+下也就是放大了1.29倍。

2，如果是完全自适应，那么可以通过JS来控制。
(function (doc, win) { var docEl = doc.documentElement, resizeEvt =
'orientationchange' in window ? 'orientationchange' : 'resize', recalc =
function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 320) + 'px'; }; // Abort if browser
does not support addEventListener if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
页面初始化的时候计算font-size，然后再绑定resize事件。这种效果就和百分比布局一样了。

那么用REM做单位与百分比做单位有什么优势？


主要优势在于能更好的控制元素大小。（一般百分比应用在布局层，一般常见设置为50%，33.3%，25%之类的整数居多，难以运用在复杂的页面小部件内）。但是相比百分比布局，需要借助JS或media
query实现，略有一点瑕疵。

• « 上一篇：区块链+物联网的未来
• » 下一篇：IE11默认启用IE8文档模式提高兼容性