首页 > 移动平台 > 详细

移动端版本兼容

时间:2016-01-02 12:13:18      阅读:338      评论:0      收藏:0      [点我收藏+]

<!--移动端版本兼容 -->
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;}

再然后就是不兼容火狐浏览器。

移动端版本兼容

原文:http://www.cnblogs.com/ll-taj/p/5094298.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!