几种常用移动端和pc端兼容标准

 

1、移动端版本兼容 用px
	var jsVer = 15;
	var phoneWidth = parseInt(window.screen.width);
	var phoneScale = phoneWidth/640;
	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=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
		// andriod 2.3以上
		}else{
			document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
		}
		// 其他系统
	} else {
		document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
	}

//移动端版本兼容 end

2、移动端版本兼容  用rem

function rePosition(){
var width = document.documentElement.clientWidth || document.body.clientWidth;
var ratio = width/750;
if(width<=750){
document.getElementsByTagName('html')[0].style.fontSize=100*ratio+"px";
}else{
document.getElementsByTagName('html')[0].style.fontSize="100px";
}
}
rePosition();
window.onresize = function(){
rePosition();
};

//移动端版本兼容 end

3、pc端响应式:

(function (doc, win) {
var doc = doc.documentElement;
doc.addEventListener('DOMContentLoaded', Resize, false);
// 当DOM加载后执行
win.addEventListener('resize', Resize, false);
if (doc.clientWidth) {
Resize();
} else {
setTimeout(Resize, 100)
}
// 当屏幕发生变化时执行
function Resize() {
doc.style.fontSize = doc.clientWidth / 19.2 + 'px';
}
})(document, window)

posted @ 2020-06-17 17:04  航行远方  阅读(1523)  评论(0编辑  收藏  举报