Jquery Mobile我有两个页面，一个用于Android，一个用于iPhone.如何检测浏览器并分配它们

Jquery Mobile I have two page one for android and one for iphone. How can i detect the browser and assign them?

本文关键字：一个 用于 检测 何检测 浏览器 分配 iPhone 两个 Jquery Android Mobile      更新时间：2023-09-26

我对jQuery Mobile有疑问。我正在为Android和iPhone构建一个浏览器页面。我在两个不同的HTML文件中创建了这两个页面。但是我想有一个文件，我想为安卓页面分配安卓浏览器，为苹果手机页面分配苹果浏览器，并相应地加载它们。

以下是代码

人造人

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


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

编写一个JavaScript函数并在加载页面之前调用它。在此函数中检查用户代理，如果用户代理与Android匹配，则加载Android页面，如果与ios匹配，则加载ios页面。安卓用户代理字符串（HTC 愿望）是

Mozilla/5.0 （Linux;U;安卓 2.1-更新1;德德;HTC Desire 1.19.161.5 Build/ERE27） AppleWebKit/530.17 （KHTML， like Gecko） 版本/4.0 Mobile Safari/530.17

和 ios （iPhone） 的用户代理是

Mozilla/5.0 （iPhone;U;CPU iPhone OS 4_0 像 Mac OS X;en-us） AppleWebKit/532.9 （KHTML， like Gecko） 版本/4.0.5 Mobile/8A293 Safari/6531.22.7

你可以通过这种方式获取用户代理

用户代理

相关文章：