Solved

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

Posted on 2010-09-05
12
2,179 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
Industry Leaders: 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

If you use the Google Now Launcher, as an aftermarket add on, have a Samsung Note 5 and are worried about power consumption be wary of using the ultra power saving mode.  Here is what happened to me when I made the mistake of trying this out...
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
This video is in connection to the article "The case of a missing mobile phone (https://www.experts-exchange.com/articles/28474/The-Case-of-a-Missing-Mobile-Phone.html)". It will help one to understand clearly the steps to track a lost android phone.
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

630 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