判斷當前登入的終端是PC端還是移動端
一、最近要把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"> 這樣在手機瀏覽器裡顯示就是正常大小了,不過這樣的話,你的頁面就會和之前放大一樣,超出了螢幕顯示範圍。如果你要讓頁面適應手機螢幕顯示,而且內容顯示正常的,建議去參考響應式網頁設計