您的位置：首页 > 移动开发

判断当前登录的终端是PC端还是移动端

2015-05-24 09:29 471 查看

一、最近要把web页面放到手机端，所以在开始登录的时候就跳转。先记下，调试中。

1、刚开始在login.jsp里面写的js，暂时发现browser.versions.mobile这个有点问题，但是还好没有用到。

<script type="text/javascript">

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);

var type="PC";

function IsMobile()

{

var userAgentInfo = navigator.userAgent;

var Agents = new Array( "iphone", "android", "symbianos", "windows phone", "ipad", "ipod");

var flag = false;

for (var v = 0; v < Agents.length; v++) {

if (userAgentInfo.toLowerCase().indexOf(Agents[v]) != -1) {

type=Agents[v];

flag = true;

break;

}

}

return flag;

}

IsMobile();

document.getElementById("isMobile").innerHTML=type;

document.getElementById("currentLanguage").innerHTML=browser.language;

if(type != "PC"){

//window.document.location.href='${pageContext.request.contextPath}/Order/IncomeConfirm/gotoListExitOrders';

window.document.location.href="${pageContext.request.contextPath}/template/mobile/home/MobileLogin.jsp";

}

</script>

2、后面发现直接在index.jsp里面写js跳转到对应的页面就可以了。

<script type="text/javascript">

var type="PC";

var userAgentInfo = navigator.userAgent;

var Agents = new Array( "iphone", "android", "symbianos", "windows phone", "ipad", "ipod");

var flag = false;

for (var v = 0; v < Agents.length; v++) {

if (userAgentInfo.toLowerCase().indexOf(Agents[v]) != -1) {

type=Agents[v];

flag = true;

break;

}

}

if(type != "PC"){

window.document.location.href="${pageContext.request.contextPath}/template/mobile/home/MobileLogin.jsp";

}else{

window.document.location.href="${pageContext.request.contextPath}/template/home/Login.jsp";

}

</script>

二、按jqueryMobile写法，发现页面上展示的元素都太小了

这种是正常的，因为手机浏览器会自动对页面缩放，以适应手机屏幕。如果要手机浏览器对页面进行调整的话，在<head>标签里加上
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


这样在手机浏览器里显示就是正常大小了，不过这样的话，你的页面就会和之前放大一样，超出了屏幕显示范围。如果你要让页面适应手机屏幕显示，而且内容显示正常的，建议去参考响应式网页设计

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航