H5頁面rem相容適配

$(document).ready(function(){
    //rem相容
    var winW = $(window).width();
    var constant = winW/6.4;(10.8/7.5)
    $("html,body").css("font-size",constant);
    $(window).resize(function(){
        var winW = $(window).width();
        var constant = winW/10.8;
        $("html,body").css("font-size"
 
,constant);
    })
})

//使用時有可能造成div等容器過大。
//div中放入img時，讓div的寬高自適應，此時會造成容器的寬高可能會大於img的寬高.
//解決：容器新增  font-size:0 ,然後div中的內容使用rem
div {
    font-size:0;
}
div img {
    width:1rem;
}
div p {
    font-size:0.5rem;
}

華為樣式調整

因為不同螢幕的寬高比尺寸的不同，所以上述的rem適配並不能非常好的適配所有手機。在chrome的偵錯程式中會發現華為手機的比例差距稍大（425 * 620），所以針對華為手機的頁面時需要調整CSS樣式

//給予樣式
function loadStyle (url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}
var w = $(window).width(),
    h=$(window).height();
var
 
 ratio = h/w;
if (ratio < 1.5){
    loadStyle("css/huawei.css");   //針對華為手機進行樣式調整
}else if(ratio > 1.8){
    loadStyle("css/index.css");    //正常引用的樣式
}