手機端自適應屏幕

時間 2021-08-13

標籤 html ide scala code htm rem function class 欄目 CSS 简体版

原文原文鏈接

一、經過這段js來替代媒體查詢（頁面具體寬常見：720/750）單位用rem，經過js所得比例爲100：1 此時假定html{font-size:100px} 即1rem = 100px 具體代碼以下 ↓html

function pgScale(){
    var deviceWidth = document.documentElement.clientWidth;
    if(deviceWidth > 720) deviceWidth = 720;
    document.documentElement.style.fontSize = deviceWidth / 7.2 + 'px';
}
pgScale();
window.onresize=function(){pgScale();};

二、要在head標籤內部加viewport 代碼以下 ↓
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">ide