移動(dòng)端段適配一直都是我們開(kāi)發(fā)過(guò)程中最頭疼的問(wèn)題，下面總結(jié)了一些適配的方法，有的是轉(zhuǎn)自其它地方，由于本人水平有限，若有錯(cuò)漏之處敬請(qǐng)諒解。
一、rem布局
代碼如下:
注意這段代碼一定要放在body之上，否則無(wú)效。
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
// orientationchange 事件是在用戶(hù)水平或者垂直翻轉(zhuǎn)設(shè)備（即方向發(fā)生變化）時(shí)觸發(fā)的事件。
// onresize 事件會(huì)在窗口或框架被調(diào)整大小時(shí)發(fā)生。
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
window.clientWidth = docEl.clientWidth;
if (!window.clientWidth) return;
docEl.style.fontSize = 40 * (window.clientWidth / 640) + 'px';
window.base = 40 * (window.clientWidth / 640);
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
也可參照http://caibaojian.com/flexible-js.html
二、首先請(qǐng)了解一下移動(dòng)前端中 viewport （視口）http://www.css88.com/archives/5975
這里介紹一下幾個(gè)移動(dòng)前端適配—低級(jí)、無(wú)趣、一堆問(wèn)題的老方法。早在幾年前，移動(dòng)前端適配有幾個(gè)很簡(jiǎn)單使用的方法。那時(shí)屏幕尺寸或者說(shuō)分辨率沒(méi)如今這么多。一般設(shè)計(jì)師設(shè)計(jì)移動(dòng)端頁(yè)面統(tǒng)一按照640像素的寬度設(shè)計(jì)。因?yàn)楫?dāng)時(shí)的主流是iPhone4，iPhone4s ，iPhone5及iPhone5s，物理像素寬度為 640，分辨率為320。其他安卓機(jī)型可以根據(jù)這些尺寸做簡(jiǎn)單粗暴的匹配。
例如下面是適配最簡(jiǎn)單粗暴的方法，而且根據(jù)我平時(shí)查看項(xiàng)目的代碼的習(xí)慣，還有相對(duì)一部分項(xiàng)目還是使用這個(gè)方法做項(xiàng)目，或者維護(hù)項(xiàng)目：
<meta name="eqMobileViewport" content="width=320,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
看起來(lái)很簡(jiǎn)單，也很實(shí)用。開(kāi)發(fā)時(shí)候一切根據(jù)640的設(shè)計(jì)稿除以2處理，字體也用簡(jiǎn)單的像素做單位（用rem換算麻煩）似乎是很完美，但是實(shí)際情況，特別是一些對(duì)齊，背景吻合總是會(huì)出現(xiàn)問(wèn)題。還有就是用現(xiàn)在高分辨率的iPhone6s等手機(jī)看，總是會(huì)被設(shè)計(jì)師鄙視。
如今手機(jī)屏幕尺寸越來(lái)越多，可以稍微升級(jí)一下上面的方法，同樣在html頭部head標(biāo)簽中先插入一個(gè)meta標(biāo)簽，在插入一個(gè)腳本設(shè)置縮放值：
<meta id="eqMobileViewport" name="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=no">
<script>
var g = document.documentElement.clientWidth / 320;
document.getElementById('eqMobileViewport').setAttribute("content", "width=320, initial-scale=" + g + ", maximum-scale=" + g + ", user-scalable=no")
</script>
這樣就比較完美了。
三、meta基礎(chǔ)知識(shí)
也可參照以下網(wǎng)站
http://www.daqianduan.com/6281.html
http://www.w3cfuns.com/notes/18165/f08c0ec910dad6d2c90807a0318abda8.html
