1.meta 設(shè)置
<meta name="viewport" content="initial-scale=1,width=device-width,user-scalable=no"/>
因?yàn)檫@樣設(shè)置了作箍，網(wǎng)頁寬度才和 設(shè)備寬度相同,才可以拿這個(gè)標(biāo)準(zhǔn)去限定范圍
瀏覽器默認(rèn)的viewport叫做 layout viewport硬梁。這個(gè)layout viewport的寬度可以通過 document.documentElement.clientWidth 來獲取,layout viewport 的寬度是大于瀏覽器可視區(qū)域的寬度的,比如980px;
visual viewport ,瀏覽器可視區(qū)域的大小 , 可以通過window.innerWidth 來獲取;
ideal viewport，也就是第三個(gè)viewport——移動設(shè)備的理想viewport;
scale = ideal viewport / visual viewport = 1/dpr ;
window.devicePixelRatio是設(shè)備上物理像素和設(shè)備獨(dú)立像素(device-independent pixels (dips))的比例胞得。
公式表示就是：window.devicePixelRatio = 物理像素 / dips荧止。
dips:device-independent pixels
設(shè)備獨(dú)立像素，就是獨(dú)立于設(shè)備之外的像素阶剑，也就是css像素跃巡。
查看更多
移動前端開發(fā)之viewport的深入理解
移動端開發(fā)中，關(guān)于適配問題的一點(diǎn)總結(jié)(一)
2. js 設(shè)置
;(function () {
var change ='orientationchange' in window ?'orientationchange' :'resize';
function calculate() {
var deviceWidth =document.documentElement.clientWidth;
if (deviceWidth <241) {
deviceWidth =240;
}else if(deviceWidth <320){
deviceWidth =320;
}else if (deviceWidth >750) {
deviceWidth =750;
}
document.documentElement.style.fontSize =deviceWidth /7.5 +'px';
};
window.addEventListener('resize',calculate,false);
calculate();
})();
2.1 js 細(xì)節(jié)
(a)
(function () {})();
;(function () {}());
立即執(zhí)行函數(shù),建立私有作用域牧愁，從而限制向全局作用域中添加過多的變量和函數(shù)
(b)
var change ='orientationchange' in window ?'orientationchange' :'resize';
看移動端是否支持orientationchange 素邪，否則監(jiān)聽 rezise 事件。
orientationchange：設(shè)備旋轉(zhuǎn)的時(shí)候猪半，會觸發(fā)這個(gè)事件
resize:監(jiān)聽窗口變化兔朦。
(c)
iphone5 屏幕分辨率 寬是 320px, iphone6，7磨确，8 屏幕分辨率 寬是 375px
(d)
rem 是一個(gè)相對單位（root em烘绽，根em），使用rem為元素設(shè)定字體大小時(shí)俐填，相對的是HTML根元素安接；
如果 <html style= "font-size:37.5px;"> , 此時(shí)，1rem = 37.5px;
document.documentElement.style.fontSize =deviceWidth /7.5 +'px';
如果 設(shè)備寬是 750px英融，html 的 font-size 則為 100px;
1rem = 100px; 1px = 1/100 rem; 5px = 5/100rem;
也就是 7.5=設(shè)計(jì)稿尺寸/100盏檐；
css元素尺寸=設(shè)計(jì)稿元素尺寸/100；
一般情況下設(shè)計(jì)師給的PSD尺寸是750px,所以采用7.5驶悟；如果是640胡野，采用6.4；
window.addEventListener(change,calculate,false); // 設(shè)備旋轉(zhuǎn)時(shí)觸發(fā)痕鳍；
calculate(); // 刷新時(shí)觸發(fā)
3.img圖片和背景圖片
雖然以上判斷條件大概包含所有機(jī)型硫豆，但有些設(shè)備視口還是比較窄的；若是需要全屏的圖片笼呆，width設(shè)置成100%熊响，而不是給他固定值。
4. css元素設(shè)置
.carbox{
width:6.5rem; /*設(shè)計(jì)圖上元素寬為650px,除以100诗赌；*/
margin:0 auto;
padding:0.1rem 0 0 0.27rem;
}
關(guān)于移動端字體設(shè)置
移動端安卓和IOS 默認(rèn)中文字體看起來是差不多的汗茄，而針對英文和數(shù)字的字體區(qū)別比較大；
而 Helvetica 兩個(gè)系統(tǒng)都支持铭若，可以這樣設(shè)置
body{font-family:Helvetica;}
