Jquery Mobile I have two page one for android and one for iphone. How can i detect the browser and assign them?
Question
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>
1 answers
solution1
1 ACCPTED 2012-05-06 07:04:42
Make both pages in same document with different ids (androidPage and iosPage) then
write aa 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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.