判斷當前登陸的終端是PC端仍是移動端

時間 2019-11-10

標籤判斷當前登陸終端仍是移動欄目無線简体版

原文原文鏈接

1、最近要把web頁面放到手機端，因此在開始登陸的時候就跳轉。先記下，調試中。javascript

一、剛開始在login.jsp裏面寫的js，暫時發現browser.versions.mobile這個有點問題，可是還好沒有用到。java

<script type="text/javascript"> jquery

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>android

二、後面發現直接在index.jsp裏面寫js跳轉到對應的頁面就能夠了。ios

<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>
web

2、按jqueryMobile寫法，發現頁面上展現的元素都過小了windows

這種是正常的，由於手機瀏覽器會自動對頁面縮放，以適應手機屏幕。若是要手機瀏覽器對頁面進行調整的話，在<head>標籤里加上
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
這樣在手機瀏覽器裏顯示就是正常大小了，不過這樣的話，你的頁面就會和以前放大同樣，超出了屏幕顯示範圍。若是你要讓頁面適應手機屏幕顯示，並且內容顯示正常的，建議去參考響應式網頁設計

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。瀏覽器

相關文章

相關標籤/搜索

前端+後端（java）

前端->值->後端

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<