通過JS實現手機等移動端頁面按手機屏幕分辨率自動縮放

2024-09-06 12:41:18

字體：大中小

來源：轉載

供稿：網友

這篇文章主要為大家詳細介紹了通過JS實現手機等移動端頁面按手機屏幕分辨率自動縮放，具有一定的參考價值，感興趣的小伙伴們可以參考一下,有需要的朋友可以收藏方便以后借鑒。

手機的屏幕有大有小，移動web最好做成響應式布局，也就是自適應屏幕，沒有固定寬高，這樣的話，在所有手機上都可以正常顯示。關于移動端頁面按手機屏幕分辨率自動縮放的js，先附上代碼

<script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.screen.height); var phoneScale = phoneWidth/750;//除以的值按手機的物理分辨率 var ua = navigator.userAgent; if (/Android (/d+/./d+)/.test(ua)) { var version = parseFloat(RegExp.$1); // andriod 2.3 if (version > 2.3) { document.write('<meta name="viewport" content="width=device-width,initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+',user-scalable=no">'); // andriod 2.3以上 } else { document.write('<meta name="viewport" content="width=device-width,user-scalable=no">'); } // 其他系統 } else { document.write('<meta name="viewport" content="width=device-width, initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale ='+phoneScale +',user-scalable=no,">'); }</script>

概念解析：

phys.width:一般我們所指的寬度width即為phys.width，物理寬度（物理分辨率）

device-width:又稱為css-width，設備寬度（邏輯分辨率）

其中我們可以獲取phys.width通過document.documentElement.clientWidth;

而獲取css-width通過 window.screen.width獲取。

所以這里 phoneWidth（邏輯分辨率） = parseInt(window.screen.width);

如iphone6的phys.width為750px，而css-width為375px。

明白一個瀏覽器默認行為。

試想，瀏覽器如果把電腦端的980px的網頁展現在寬度為750px的iphone6手機屏上，勢必會放不下，手機端橫向會出現滾動條，怎么阻止這種情況呢，很簡單，瀏覽器默認一個虛擬窗口，不同瀏覽器有不同的虛擬窗口寬度的默認值如：safari iphone：980px;

opera:850px;

Andriod webkit:800px;

IE:974px;