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)