H5页面rem兼容适配及华为样式调整

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");    //正常引用的样式
}