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 那個還要繼續加固練習。