天天看點

px轉換rem自适應手機樣式

/ px轉換rem
var IntervalId  = 0;
window.onload = function() {
    IntervalId = self.setInterval("RemCount()", 100);
};
function RemCount() {
    var ClientWidth = document.documentElement.clientWidth || document.body.clientWidth;
    if (ClientWidth < 10) {
        return;
    }
    var viewport = document.querySelector("meta[name=viewport]");
    if (window.devicePixelRatio == 1) {
        viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
    }
    if (window.devicePixelRatio == 2) {
        viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
    }
    if (window.devicePixelRatio == 3) {
        viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
    }
    // 1rem = 10rem 預設最低比例為1:16,如果低于此比例會強制使用1:16,進而引起高度的巨大問題(自行測試)
    var ClientWidth = document.documentElement.clientWidth || document.body.clientWidth;
    if (ClientWidth > 0) {
        localStorage.ClientWidth = ClientWidth;
    } else {
        ClientWidth = localStorage.ClientWidth;
    }
    document.documentElement.style.fontSize = ClientWidth / 7.5 + 'px';
    console.log("PHP頁提示,寬度及rem比例:" + ClientWidth + " / " + (ClientWidth/7.5));
    if (ClientWidth > 0) {
        window.clearInterval(IntervalId);
    }
}