移动端版本兼容
<!--移动端版本兼容 -->
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">');
}
if(IsPC()){
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
}
return flag;
}
<!--移动端版本兼容 end -->
注意:把上面的代码单独分装成一个JS,然后在底部引入,头部不需要些任何有关于<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum- scale=0.5, maximum-scale=2.0, user-scalable=yes">这样类似的代码
然后按照切PC端的切法切,就是需要在样式body里面加个{ width:640px; margin:0 auto;}
再然后就是不兼容火狐浏览器。