Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

website redirect to iphone & smartphone sized webpage - i have iphone script code

Posted on 2010-09-05
12
Medium Priority
?
2,182 Views
Last Modified: 2014-11-12
i have the attached code that works great with iphones

it detects that it is a iphone or ipod touch and redirects to my webpage that
is coded for iphones and ipods.

can anyone help so that it can detect and work with most smartphones?

the first code is the page that detects iphone and redirects
the second code is the actual resized page

thanks

// iphone redirect page //


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IPHONE REDIRECT PAGE</title>

<script>if ((navigator.userAgent.indexOf('iPhone') != -1) ||  
(navigator.userAgent.indexOf('iPod') != -1)) {  
document.location = "http://www.mywebsite.com/iphone.html";  
} </script>


</head>

<body>

</body>

</html>

Open in new window



// actual iphone page //


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IPHONE PAGE</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 
<link rel="apple-touch-icon" href="images/logo_image.png"/> 

<style type="text/css">
.style1 {
				font-family: "Trebuchet MS";
				font-size: 14pt;
				color: #535353;
}
</style>

</head>

<body style="background-color: #D0E8D0" onorientationchange="updateOrientation();">
<div id="page_wrapper" class="style1">

This is our iPhone Page<br />
<br />
It fits your iphone or ipod touch. if you have it straight up or rotate it.</div>
</body>

</html>

Open in new window

0
Comment
Question by:webdott
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
12 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 33607893
0
 

Author Comment

by:webdott
ID: 33608002
thanks! - i used the accepted code of the above thread.

it worked with iphone and ipod touch,
but i do not have a windows or blackberry phone to test it with at the moment.
i am trying to upload it to a hosting site so that my friends can test it on these phones.

here is the final code.

does anyone have a windows or blackberry to test it?




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IPHONE REDIRECT PAGE</title>

<script language="javascript">
	var is_mobile = (/iphone|ipad|ipod|andoid|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent));
	if(is_mobile) window.location = 'http://www.google.com';
</script>

</head>

<body>

<p>see this - redirect did not work</p>

</body>

</html>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 33608018
Starting from here : http://user-agent-string.info/list-of-ua/browser-detail?browser=BlackBerry

We can use lowercase : navigator.userAgent.toLowerCase()

this why it don't work for the EE member in the previous post.
var is_mobile = (/iphone|ipad|ipod|andoid|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));

Open in new window

0
Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

 

Author Comment

by:webdott
ID: 33628814
it looks like it will work. i inserted the new code.
it works with the iphone, ipod touch
can anyone check this out with a blackberry, microsoft, andriod phone?
i have seom friends trying it out, but it may take them some time to get back with me.
figured EE would have more people that could test it.
i have it live at     www.myblankweb.com
if it works - you are redirected to google.com
if it doesn't, it tells you you should have been redirected to www.google.com
Thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33628899
coul you replace :

if(is_mobile) window.location = 'http://www.google.com';

by :

if(is_mobile) window.location = 'http://www.google.com';
else alert(navigator.userAgent.toLowerCase());
0
 

Author Comment

by:webdott
ID: 33629238
updated the website www.myblankweb.com
with the following new code.
it has been tested with,
iphone, ipod touch, windows phone HTC Imagio anyone with a blackberry or andriod phone?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="MobileOptimized" content="width" />

<title>mobile REDIRECT PAGE</title>

<script language="javascript">
	var is_mobile = (/iphone|ipad|ipod|andoid|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
	if(is_mobile) window.location = 'http://www.google.com';
else alert(navigator.userAgent.toLowerCase());
</script>

<style type="text/css">
.style1 {
				font-family: "Trebuchet MS";
				font-size: 14pt;
}
</style>

</head>

<body>

<p class="style1">If you see this - the code did not work : (</p>
<p class="style1">You should have been redirected to www.google.com</p>

</body>

</html>

Open in new window

0
 

Author Comment

by:webdott
ID: 33629251
does the alert have to be there?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33629255
ok for windows mobile 6.5, for android, you've a typo error, the << r >> is missing : andoid

for blackberry : http://na.blackberry.com/eng/developers/resources/simulators.jsp
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33629272
>does the alert have to be there?

no the alert is to debug/display the userAgent so you can understand why it don't work/redirect
the goal is to search string in the userAgent : iphone or ipad or ipod or android or blackberry or mini or windows ce or palm
0
 
LVL 2

Expert Comment

by:sqlgang
ID: 33633538
If you are using asp.net - then try out mobile device detection API provided by 51degrees at http://51degrees.codeplex.com/. Using this - you can detect the requesting browser/device on server side along with the width/height of the requesting device's browser, whether it supports CSS/Javascript, various image types etc.. and from there itself - request can be redirected to required lending page which you have optimized for the specific device. Thus, detection of the device property happens on server side and user will just see the final output - without any redirection from the browser. This would give seamless user experience.
0
 

Author Closing Comment

by:webdott
ID: 33633874
Excellent this worked ont the phones tested

thanks
0

Featured Post

CHALLENGE LAB: Troubleshooting Connectivity Issues

Goal: Fix the connectivity issue in the lab's AWS environment so that you can SSH into the provided EC2 instance.  

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
There is a lot to be said for protecting yourself and your accounts with 2 factor authentication.  I found to my own chagrin, that there is a big downside as well.
The viewer will learn how to count occurrences of each item in an array.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

704 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question