幾種常用移動端和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)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM