android浏览网页自适应屏幕大小,JS检测移动端自适应屏幕大小

PC页面常常在手机上无法正常显示，或页面内容超出屏幕无法看到，或页面排版乱七八糟。

今天，米扑博客整理了PC端网页自适应手机屏幕的代码，可以做到自适应手机屏幕宽度。

在网页的

中增加一个meta标签，可以让网页的宽度自动适应手机屏幕的宽度。

其中：

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例

如果想要一打开网页，则自动以原始比例显示，并且不允许用户拖动和放大缩小的话，则是：

这样就可以了，就能将网页的宽度放到手机上，让其自适应了。

判断是否是移动端

方式1： 检测系统平台

//平台、设备和操作系统

var system = {

win: false,

mac: false,

xll: false,

ipad:false

};

var p = navigator.platform;　　// 检测平台

system.win = p.indexOf("Win") == 0;

system.mac = p.indexOf("Mac") == 0;

system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false;

//跳转语句，如果是手机访问就自动跳转到" "里的页面

if (system.win || system.mac || system.xll || system.ipad) {

alert("PC Page");

} else {

window.location.href = " ";

alert("Mobile Device");

}

方式2： 检测 User-Agent

function browserRedirect() {

var sUserAgent = navigator.userAgent.toLowerCase();// 检测 userAgent

var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";

var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";

var bIsMidp = sUserAgent.match(/midp/i) == "midp";

var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";

var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";

var bIsAndroid = sUserAgent.match(/android/i) == "android";

var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";

var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

document.writeln("您的浏览设备为：");

if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {

alert("Mobile Device");

} else {

alert("PC Page");

}

}

browserRedirect();

方式3： 腾讯网适配代码

//腾讯网的适配代码

var browser = {

versions : function() {

var u = navigator.userAgent, app = navigator.appVersion;

return {//移动终端浏览器版本信息

trident : u.indexOf('Trident') > -1, //IE内核

presto : u.indexOf('Presto') > -1, //opera内核

webKit : u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核

gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核

mobile : !!u.match(/AppleWebKit.*Mobile.*/)

|| !!u.match(/AppleWebKit/), //是否为移动终端

ios : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端

android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器

iPhone : u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器

iPad: u.indexOf('iPad') > -1, //是否iPad

webApp : u.indexOf('Safari') == -1,

//是否web应该程序，没有头部与底部

google:u.indexOf('Chrome')>-1

};

}(),

language : (navigator.browserLanguage || navigator.language).toLowerCase()

}

document.writeln("语言版本: "+browser.language);

document.writeln(" 是否为移动终端: "+browser.versions.mobile);

参考推荐：