pc端網頁自適應各版本移動端螢幕大小
阿新 • • 發佈：2019-02-14
之前做了一個小專案，打包為app後在大部分安卓機上都可以完美執行，只有魅族的一款型號機產生了螢幕適應問題。
在網上廣泛搜尋後終於找到了解決辦法：
meta標籤起決定性作用
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
在網頁的<head>中增加這句話，可以讓網頁的寬度自動適應手機螢幕的寬度。<meta> 元素可提供有關頁面的元資訊。
<meta> 標籤位於文件的頭部，不包含任何內容。
<meta> 標籤的屬性定義了與文件相關聯的名稱/值對。
width=device-width ：表示寬度是裝置螢幕的寬度
initial-scale=1：表示初始的縮放比例
minimum-scale=1：表示最小的縮放比例
maximum-scale=1：表示最大的縮放比例
user-scalable=no：表示使用者是否可以調整縮放比例
！！！切記： 利用這種方法來使網頁自適應手機螢幕之後，在頁面佈局中，css定義寬度的時候最好不要使用具體的值（例如xx px），而是應該使用百分比（例 50%）。
還有另一種方法是利用 js 程式碼來使其適應螢幕大小，但是我用的效果並不太好
function bodyScale() {
var devicewidth = document.documentElement.clientWidth;
var scale = devicewidth / 頁面寬度;
document.body.style.zoom = scale;
}
window.onload = window.onresize = function () {
bodyScale();
};都是在各位前輩的部落格學到的，真的很有用處，js 那個還要繼續加固練習。