Mobile Redirect ONLY (not ipad) for NON-Wordpress sites

Justin B · 2nd Jul 2012, 07:12 AM

I have a client who's interested in a mobile website, but has specifically said that he doesn't want the mobile version to display on any tablets.

It needs to be for a NON Wordpress site?

I have to call him back tomorrow so I'm hoping someone may have a quick answer.

Much appreciated.

Michael Travis · 2nd Jul 2012, 10:15 AM

A mobile redirect can be done for this. You would have to base the redirect upon the user's screen size and limit it below the ipad size. I have seen this in a redirect script from a report off this forum.

RoiJB · 3rd Jul 2012, 10:43 AM

Use this redirect in the head section of your HTML page, preferably the first thing after the <head> tag. Replace the text in red with the url you are sending mobile devices to.
The screen width being less than 600 is to prevent 7" tablets being redirected.

<script type="text/javascript">

</script>

Jay Moreno · 3rd Jul 2012, 11:24 AM

@OP is it just ipads you dont want redirecting or all tablets in general?

Originally Posted by RoiJB

Use this redirect in the head section of your HTML page, preferably the first thing after the <head> tag. Replace the text in red with the url you are sending mobile devices to.
The screen width being less than 600 is to prevent 7" tablets being redirected.

<script type="text/javascript">

</script>

RoiJB - by going to a size less than 599 you exclude many of the smart phones with screen sizes bigger than 599... ie iphones, android galaxy, etc

for not redirecting ipads i would recommend you do something like this... i haven't tested it just off the top of my head but in theory it should work...

HTML Code:

<script type="text/javascript">
//<![CDATA[
if (navigator.userAgent.toLowerCase().indexOf('ipad')!=-1)
  {}
else if (screen.width < 1024 || navigator.userAgent.toLowerCase().indexOf('android ')!=-1)
(window.location.replace("http://www.yourdomainhere.com"));
//]]>
</script>

place it before you </head> tag and replace yourdomainhere.com with where you want the visitor to be redirected.

basically it tests first to see if its an ipad browser or not

if it is it doesn't do anything

if it is not an ipad browser but a device with a screensize less than 1024 it will redirect

the android detection is put in there as javascript sometimes reports incorrectly the size of the android screensize...

i use user agent detection and redirection every single day modifying this stuff all the time for plugins/mobile websites etc hence why i added the android user agent so am pretty sure it will work!

hth

jay

PS personally i would also recommend you actually use PHP user agent based detection over javascript wherever possible

PPS it does work i just tested it! lol

RoiJB · 3rd Jul 2012, 12:39 PM

@ Jay

The screen width for the iPhone is 480, Blackberry is 480, Samsung Galaxy listed as 480, I couldn't find the actual reported screen width for the Galaxy S3 but since it is 4.8" which is substantially less than the 7" tablet that reports a screen width of 600 I think it's a pretty sure bet that it reports less than 600.

There is general confusion in mobile devices regarding screen Resolution and reported screen width by the browser, they are two different specifications and relate loosely by how many ppi the display is capable of showing in the actual width of the display.

Another note of interest the screen width of the browser is still reported as the same width whether you are in Landscape or regular mode.

Your excellent script will also work if he only wants to eliminate iPads, I took his statement literally meaning "No Tablets".

Out of curiosity what would be your reason for suggesting PHP over javascript when there is much more overhead and slower response with PHP compared to clean minimum scripting?

Regards,
James

JohnE · 3rd Jul 2012, 12:52 PM

Originally Posted by Jay Moreno

PS personally i would also recommend you actually use PHP user agent based detection over javascript wherever possible

Absolutely. I found, from experience, javascript redirection to be precarious at best; especially since the resolution on some of the newer phones is getting higher.

PHP user agent detection is a much more robust way to detect device type.

John

RoiJB · 3rd Jul 2012, 12:55 PM

Originally Posted by Justin B

I have a client who's interested in a mobile website, but has specifically said that he doesn't want the mobile version to display on any tablets.

It needs to be for a NON Wordpress site?

I have to call him back tomorrow so I'm hoping someone may have a quick answer.

Much appreciated.

Obviously the answer is yes you can do that, just do some research and decide how you want to do it.

Your decision should also be based on whether it is an HTML site or a PHP site.

Jay Moreno · 3rd Jul 2012, 04:33 PM

@ROIJB - i actually mis read the opening thread and just looked at the title stating mobile redirect only not ipad when i started typing

I also go with <1024 now as a matter of best practice, we test on a number of devices and as new devices are released on other operating systems aside from iOS and Android it gets harder and harder to keep up and test them on real devices especially when "specifications" don't always represent true world experience... take a look at the following screenshots and you will see what i mean...

Screenshot 1 - Samsung S2 - Portrait
Javascript is reading it as 800 x 1125

Screenshot 2 - Samsung S2 - Landscape
Javascript is reading it as 800 x 355

Screenshot 3 - Samsung S - Portrait
Javascript is reading it as 800 x 597

Screenshot 4 - Samsung S - Portrait (just refreshing the page)
Javascript is reading it as 800 x 1130

NONE of those sizes reflect the actual manufacturers stated resolution... for now this is why we use < 1024 (when not using PHP useragent detection) especially as smartphone sizes are on the increase - had another device displayed the same resolutions and not be running android then it would not have got redirected to the mobile web site had the redirect been set to <=599

I don't see javascript as being faster than PHP - with PHP user agent detection you can intercept the page before it even renders the very first line of code - which is not the case with Javascript.

There's always going to be several ways to do things and just from experience this is my preference, have been involved in mobile since early 2000 and days of WML but am always open to new suggestions

PS FYI as of right now we also opt to use responsive design for desktop and tablets and optimized adaptive design for mobile devices/smart phones

RoiJB · 4th Jul 2012, 12:19 AM

@ Jay

Thanks for your explanation and I agree with the resolution and size of new devices changing quite rapidly being an issue.

I have been hand coding HTML websites since 1998 so I guess it all comes down to what we're used to and thankfully everyone doesn't have to be the same otherwise there would only be boring results.

P.S. FYI I'm not a fan of WP either LOL

2nd Jul 2012, 07:12 AM	#1
Justin B Active Warrior War Room Member Join Date: 2011 Posts: 61 Thanks: 15 Thanked 8 Times in 7 Posts	Mobile Redirect ONLY (not ipad) for NON-Wordpress sites Share on: I have a client who's interested in a mobile website, but has specifically said that he doesn't want the mobile version to display on any tablets. It needs to be for a NON Wordpress site? I have to call him back tomorrow so I'm hoping someone may have a quick answer. Much appreciated.

2nd Jul 2012, 10:15 AM	#2
Michael Travis HyperActive Warrior War Room Member Join Date: 2008 Location: , , USA. Posts: 254 Thanks: 26 Thanked 150 Times in 41 Posts	Re: Mobile Redirect ONLY (not ipad) for NON-Wordpress sites Share on: A mobile redirect can be done for this. You would have to base the redirect upon the user's screen size and limit it below the ipad size. I have seen this in a redirect script from a report off this forum.

3rd Jul 2012, 10:43 AM	#3
RoiJB Warrior Member War Room Member Join Date: 2011 Posts: 22 Thanks: 24 Thanked 28 Times in 24 Posts	Re: Mobile Redirect ONLY (not ipad) for NON-Wordpress sites Share on: Use this redirect in the head section of your HTML page, preferably the first thing after the <head> tag. Replace the text in red with the url you are sending mobile devices to. The screen width being less than 600 is to prevent 7" tablets being redirected. <script type="text/javascript"> <!-- if (screen.width <= 599) { document.location = "mobile.html"; } //--> </script>

3rd Jul 2012, 12:39 PM	#5
RoiJB Warrior Member War Room Member Join Date: 2011 Posts: 22 Thanks: 24 Thanked 28 Times in 24 Posts	Re: Mobile Redirect ONLY (not ipad) for NON-Wordpress sites Share on: @ Jay The screen width for the iPhone is 480, Blackberry is 480, Samsung Galaxy listed as 480, I couldn't find the actual reported screen width for the Galaxy S3 but since it is 4.8" which is substantially less than the 7" tablet that reports a screen width of 600 I think it's a pretty sure bet that it reports less than 600. There is general confusion in mobile devices regarding screen Resolution and reported screen width by the browser, they are two different specifications and relate loosely by how many ppi the display is capable of showing in the actual width of the display. Another note of interest the screen width of the browser is still reported as the same width whether you are in Landscape or regular mode. Your excellent script will also work if he only wants to eliminate iPads, I took his statement literally meaning "No Tablets". Out of curiosity what would be your reason for suggesting PHP over javascript when there is much more overhead and slower response with PHP compared to clean minimum scripting? Regards, James
	Last edited on 3rd Jul 2012 at 12:44 PM. Reason: additional question

3rd Jul 2012, 04:33 PM	#8
Jay Moreno Mobile+WP = JumpMobi.com War Room Member Join Date: 2009 Location: San Antonio, Tx Posts: 1,270 Thanks: 301 Thanked 449 Times in 309 Posts	Re: Mobile Redirect ONLY (not ipad) for NON-Wordpress sites Share on: @ROIJB - i actually mis read the opening thread and just looked at the title stating mobile redirect only not ipad when i started typing I also go with <1024 now as a matter of best practice, we test on a number of devices and as new devices are released on other operating systems aside from iOS and Android it gets harder and harder to keep up and test them on real devices especially when "specifications" don't always represent true world experience... take a look at the following screenshots and you will see what i mean... Screenshot 1 - Samsung S2 - Portrait Javascript is reading it as 800 x 1125 Screenshot 2 - Samsung S2 - Landscape Javascript is reading it as 800 x 355 Screenshot 3 - Samsung S - Portrait Javascript is reading it as 800 x 597 Screenshot 4 - Samsung S - Portrait (just refreshing the page) Javascript is reading it as 800 x 1130 NONE of those sizes reflect the actual manufacturers stated resolution... for now this is why we use < 1024 (when not using PHP useragent detection) especially as smartphone sizes are on the increase - had another device displayed the same resolutions and not be running android then it would not have got redirected to the mobile web site had the redirect been set to <=599 I don't see javascript as being faster than PHP - with PHP user agent detection you can intercept the page before it even renders the very first line of code - which is not the case with Javascript. There's always going to be several ways to do things and just from experience this is my preference, have been involved in mobile since early 2000 and days of WML but am always open to new suggestions PS FYI as of right now we also opt to use responsive design for desktop and tablets and optimized adaptive design for mobile devices/smart phones
	Sorry, I am too busy helping people to think of a cool signature!

4th Jul 2012, 12:19 AM	#9
RoiJB Warrior Member War Room Member Join Date: 2011 Posts: 22 Thanks: 24 Thanked 28 Times in 24 Posts	Re: Mobile Redirect ONLY (not ipad) for NON-Wordpress sites Share on: @ Jay Thanks for your explanation and I agree with the resolution and size of new devices changing quite rapidly being an issue. I have been hand coding HTML websites since 1998 so I guess it all comes down to what we're used to and thankfully everyone doesn't have to be the same otherwise there would only be boring results. P.S. FYI I'm not a fan of WP either LOL