CODEWITHSUNDEEP
javascriptjqueryjquery-mobilebrowser-detectionandroid-browser
dhiku
dhiku

Reputation: 1858

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

I have a doubt in jQuery Mobile. I am building a browser page for Android and iPhone. I created both pages in two different HTML files. But i want to have one File and i want to assign the android browser for android page and iphone browser for iphone page and load them accordingly.

Below is the Code

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>

and for iPhone here it is 

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

Upvotes: 0

Views: 505

Answers (1)

Tanveer
Tanveer

Reputation: 2087

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

write a a javascript function and call it before loading page. In this function check user agent , if user agent matches to android then load android page and if matches to ios then load ios page. User agent string for android ( HTC desire) is

Mozilla/5.0 (Linux; U; Android 2.1-update1; de-de; HTC Desire 1.19.161.5 Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

and user agent for ios (Iphone) is

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7

you can get user agent in this way

User Agent

Upvotes: 1

Related Questions