1.使用viewport，html文件中在

內添加meta，簡單粗暴：

2.加判斷復雜點的viewport，可以封裝成一個js，每次新建html時調用.js即可：

var phoneWidth = parseInt(window.screen.width);

var phoneScale = phoneWidth/750;

var ua = navigator.userAgent;

if (/Android (\d+\.\d+)/.test(ua)){

var version = parseFloat(RegExp.$1);

if(version>2.3){

document.write('')

}else{

document.write('')

}

} else {

document.write('')

}

3.使用rem，一般情況下設置為1rem=100px，在寫css的width、height、margin、padding時比較好換算，例如設計稿上職位52px，則換算后為0.52rem，js代碼可以封裝成js文件，每次調用即可：

(function(doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function() {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

if(clientWidth>=640){ //頁面視口最大設為640，當大于640px時，文件的font-size=100px

docEl.style.fontSize = '100px';

}else{

docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; //頁面視口小于640時，

文件的font-size的值隨著視口的變化而改變 若想1rem=50px，可以把100換成50，以此類推

}

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

js使用后，變化如下：

參考：

總結

以上是生活随笔為你收集整理的html 手机分辨率,移动端各种分辨率手机屏幕----适配方法集锦的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。