Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2186
  • Last Modified:

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

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
webdott
Asked:
webdott
  • 6
  • 5
1 Solution
 
leakim971PluritechnicianCommented:
0
 
webdottAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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!

 
webdottAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
webdottAuthor Commented:
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
 
webdottAuthor Commented:
does the alert have to be there?
0
 
leakim971PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
>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
 
sqlgangCommented:
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
 
webdottAuthor Commented:
Excellent this worked ont the phones tested

thanks
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now