html 手机分辨率,移动端各种分辨率手机屏幕----适配方法集锦

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 手机分辨率,移动端各种分辨率手机屏幕----适配方法集锦的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。