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