Solved

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

Posted on 2010-09-05
12
2,174 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 500 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 82

Expert Comment

by:leakim971
ID: 33608029
0
 

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

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

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

Suggested Solutions

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

726 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