移動端網頁meta設置和響應式

蘇寧易購WAP的meta分析

 

響應式

　　meta設置

　　　　

　　　　媒體查詢時讀的width為viewport的寬度。viewport寬度為手機分辨率。比如note2 1280*720.需要重置為設備 640*360

 

      方式

類型	css	javascript
原理	媒體查詢寬、高范圍。設置html的font-size基准值	(window.innerWidth/psd的初始化寬度)*psd的初始font-size。算出當前網頁的font-size。賦給html
特征	優點： 純css解決	缺點： 需要在頁面渲染前，阻塞瀏覽器。 部分舊手機瀏覽器，需內嵌JS代碼才能保證阻塞。
	缺點： 因為是范圍，不能精確適配。如果新增一種主流手機，離范圍的邊界較遠，需要為它重新划定范圍	優點 非常精確

 

　　css響應式　

　　　　范圍的選擇是根據需要適配的主流手機分辨率來定，盡量讓主流手機接近范圍邊界。並非按規律遞增。　

/* 
  rem方式，750px 為psd基准寬度，50px為font-size基准大小。 body設置的是默認字體大小
 */

html{font-size:50px;}
body{font-size:24px;}
@media screen and (min-width:320px){
  html{font-size:21.333333333333332px;}
  body{font-size:12px;}
}
@media screen and (min-width:360px){
  html{font-size:24px;}
  body{font-size:12px;}
}
@media screen and (min-width:375px){
  html{font-size:25px;}
  body{font-size:12px;}
}
@media screen and (min-width:384px){
html{font-size:25.6px;}
body{font-size:14px;}
}
@media screen and (min-width:400px){
html{font-size:26.666666666666668px;}
body{font-size:14px;}
}
@media screen and (min-width:414px){
html{font-size:27.6px;}
body{font-size:14px;}
}
@media screen and (min-width:424px){
html{font-size:28.266666666666667px;}
body{font-size:14px;}
}
@media screen and (min-width:480px){
html{font-size:32px;}
body{font-size:15.36px;}
}
@media screen and (min-width:540px){
html{font-size:36px;}
body{font-size:17.28px;}
}
@media screen and (min-width:720px){
html{font-size:48px;}
body{font-size:23.04px;}
}
@media screen and (min-width:750px){
html{font-size:50px;}
body{font-size:24px;}
}

 

　　js響應式

/* 
  rem方式，640px 為psd基准寬度，16px為font-size基准大小。 
 */

function _adaptFont(maxWidth, baseWidth,baseSize){
    maxWidth = maxWidth || 640;//最大值640px
    baseWidth = baseWidth || 320;
    baseSize = baseSize || 16;
    var winWidth =  parseInt(window.innerWidth);   /*s4手機讀到的winWidth是分辨率的寬*/
    var docWidth =  parseInt(document.documentElement.clientWidth);  //和winWidth區別是，減去右邊滾動條
    var bodyWidth =  parseInt(document.body.clientWidth);   //混合模式下使用
    var docWidth = Math.min(winWidth, bodyWidth, docWidth);
    docWidth > maxWidth && (docWidth = maxWidth);

    //設置基准值
    document.documentElement.style.fontSize =  (docWidth/baseWidth)*baseSize + 'px';


}
_adaptFont();
window.addEventListener("resize",_adaptFont);