0

我對jQuery Mobile有疑問。我正在爲Android和iPhone構建瀏覽器頁面。我在兩個不同的HTML文件中創建了兩個頁面。但我想有一個文件,我想爲Android頁面和iphone瀏覽器分配android瀏覽器,並相應地加載它們。Jquery Mobile我有兩個頁面一個android和一個iphone。我如何檢測瀏覽器並分配它們?

下面是代碼

的Android

!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <title>Android</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
    <link rel="stylesheet" href="my.css" /> 
    <style> 
     /* App custom styles */ 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
    </script> 
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 
    </script> 
</head> 
<body> 
    <div data-role="page" data-theme="a" id="page1"> 
     <div data-theme="b" data-role="header"> 
     </div> 
     <div data-role="content"> 
      <div> 
       <h1 class="text-align-center"> 
        <b> 
         Apple 
        </b> 
       </h1> 
      </div> 
      <div> 

       </div> 
      </div> 
      <a data-role="button" data-transition="none" data-theme="b" href="http:m.apple.com"> 
       Go 
      </a> 
     </div> 
    </div> 
    <script> 
     //App custom javascript 
    </script> 
</body> 

和iPhone這裏是

<!DOCTYPE html> 
<html> 
<head> 
<title>Apple</title> 
<!-- the three things that jQuery Mobile needs to work --> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
    <link rel="stylesheet" href="iphone.css" /> 
    <style> 
     /* App custom styles */ 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
    </script> 
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 
    </script> 
    <script type="text/javascript" src="mobiledetect.js"></script> 

<!-- This is the first page --> 
<section id="firstpage" data-transition="flip" data-theme="b" data-role="dialog"> 
    <div data-role="content"> 
      <div> 
       <h1 class="text-align-center"> 
        <b> 
         Apple 
        </b> 
       </h1> 
      </div> 

      <a data-role="button" data-transition="flip" data-theme="b" href="http://m.apple.com"> 
       Go 
      </a> 
     </div> 

</section> 

回答

1
Make both pages in same document with different ids (androidPage and iosPage) then 

寫了一個javascript函數和之前加載頁面調用它。在這個函數中檢查用戶代理,如果用戶代理與android相匹配,則加載android頁面,如果匹配到ios,則加載ios頁面。的Android(HTC慾望) 用戶代理字符串是

的Mozilla/5.0(Linux的; U;的Android 2.1-UPDATE1; DE-DE; HTC慾望1.19.161.5構建/ ERE27)爲AppleWebKit/530.17(KHTML,例如Gecko )版本/ 4.0移動Safari/530.17

和IOS用戶代理(iPhone)是

的Mozilla/5.0(iPhone; U; CPU iPhone OS 4_0,例如Mac OS X; EN-US)爲AppleWebKit/532.9(KHTML,像Gecko)版本/ 4.0.5 Mobile/8A293 Safari/6531.22.7

你可以用這種方式獲得用戶代理

用戶代理

相關問題