Redirect mobile devices to alternate version of my site

Question

We've got an alternate version of out website ready for mobile devices. The content we serve is different and it works well.

What is the best way to detect which version to serve. We don't have a list of all mobile devices so to use the user-agent header is tricky as we may miss something.

We thought about useing device screen width - but what happens if the mobile device doesnt support javascript. How do we sniff this ?

skaffman · Accepted Answer · 2009-07-13T10:18:27.040

26

You could use a device description database (such as WURFL) which will recognise the client device from the request headers. You can then query that database to decide if the device can handle your site (e.g. support javascript, or is the screen big enough) before deciding whether to redirect them to a different site.

You don't mention your environment, but WURFL supplies APIs for Java and PHP, and maybe others as well. If there's no supplied API, you can still use WURFL, but you'll have to parse and process the XML data yourself.

edited Jul 13 '09 at 10:18

answered Jul 13 '09 at 10:04

skaffman

398,947
96
818
769

2

Didn't know hat a thing la that exist. Much better than my solution – Clement Herreman Jul 13 '09 at 10:59

score 8 · Answer 2 · answered Oct 28 '10 at 16:24

8

media="handheld" doesn't work with modern smartphones like the iphone which pretend to be a desktop browser (uses the screen media type).

http://detectmobilebrowser.com/ Free & open source, has a comprehensive mobile user-agent checker available in many languages - javascript, php, asp.net, ruby, etc.

answered Oct 28 '10 at 16:24

JohnB

81
1
1

Isn't it bad for SEO as it redirects to detectmobilebrowser.com first? – Vijeet Deliwala Aug 21 '14 at 19:43
2

Actually you're supposed to change that part of the code so that it reads *firecoding.com* instead ;-) – JoshuaDavid May 07 '15 at 14:38
@FireCoding that is the sneakiest comment I ever saw :) – Daniel C May 20 '16 at 15:25

Elliot Fehr · Answer 3 · 2016-07-20T17:03:38.787

If you are looking to redirect to a mobile site using JavaScript, I noticed that WURFL also has a solution for that will allow you to do server side detection with JavaScript.

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

you will be left with a JSON object that looks like:

{
     "complete_device_name":"Apple iPhone 6",
     "is_mobile":true,
     "form_factor":"Smartphone"
}

You can then use this:

if (WURFL.is_mobile === true) {
    window.location.replace("http://stackoverflow.com");
}

score 2 · Answer 4 · answered Jul 13 '09 at 10:02

2

I don't think there is a good/elegant way to detect if user has his javascript activated.

IMO, the best is to list the user agent : here is a User-Agent list, which seems quite complete (in French, sadly).

answered Jul 13 '09 at 10:02

Clement Herreman

10,274
4
35
57

score 2 · Answer 5 · edited Jan 16 '13 at 16:52

2

Just put this in your header:

<script type="text/javascript">
 <!--
  if (screen.width <= 700) {
  window.location = "http://www.mobile-site.com";
  }
 //-->
</script>

Just about everyone's computer screens are above the threshhold of 700px but this vaule can be changed. There isnt a phone or tablet out there that is above 700px (at least I dont know of any) so all mobile divices will redirect to your mobile site.

edited Jan 16 '13 at 16:52

shytikov

9,155
8
56
103

answered Jan 16 '13 at 16:25

Walker

29
1

1

Regular ipad has a resolution 1024x768, ipad retina is twice that. So I'd be wary of relying on this. – anyeone Feb 14 '14 at 16:09
And as of 2015, this answer is obsolete. – Martijn Dec 02 '15 at 13:27

score 2 · Answer 6 · answered Apr 15 '14 at 09:08

2

An alternative to WURFL is Mobile Detect, a PHP class for detecting:

Tablet
Mobile
iOs
Android
Browsers
And much more

So in case WURFL doesn't do what you need, you can always check this out.

answered Apr 15 '14 at 09:08

Sander Koedood

6,007
6
25
34

score 0 · Answer 7 · answered Jul 13 '09 at 10:17

0

Agreeing with Skaffman, another device database is DeviceAtlas. You have to pay for this one though.

answered Jul 13 '09 at 10:17

darasd

2,899
3
26
39

score 0 · Answer 8 · edited Nov 09 '11 at 17:40

0

Simple:

<link rel="alternate" media="handheld" href="WEBSITE HERE">

put that in the head section.

edited Nov 09 '11 at 17:40

Jason Plank

2,336
5
31
40

answered Oct 09 '09 at 19:15

yesminusno

21

-1 iPhone/iPod Touch, and other smartphones, don't honor the `handheld` media type. They want to display the regular version of the site: which means you need some *other* mechanism to detect a mobile browser. – Ian Boyd Mar 11 '11 at 21:09
1

This isn't a detection method, it's a way of semantically telling the browser where to find the mobile site. – JKirchartz Sep 20 '11 at 17:31
1

But it sure would be nice, IMO, if mobile browsers would standardize on honoring markup like this by, say, displaying a dialog asking whether the user wants the mobile version of the site and offering to remember that choice. – dbreaux Apr 27 '12 at 13:49

score 0 · Answer 9 · answered Nov 21 '10 at 10:20

If the device doesn't support JS, it's better to consider a Server-side solution, and WURFL API can help towards that direction.

Sometimes we want to avoid issue with this kind of approach (such as a reverse proxy caches pages and don't let redirect to the mobile version) or we need a quick solution knowing that nowadays almost all recent devices support JS.

For this reason, I wrote a JS script called "redirection_mobile.js" that detects the User Agent of the browser and redirects to the mobile version of your site if you're accessing it from a mobile device.

In some case you want to redirect from a mobile device to a desktop version (like with a link "Go to the main site"), the script will handle that and once you finish your session, you'll access to the mobile version again.

You can find the source code on github here http://github.com/sebarmeli/JS-Redirection-Mobile-Site and you can read more details in one of my article here:

http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/

score 0 · Answer 10 · answered Jun 04 '19 at 12:08

here is the working solution

RewriteEngine On
RewriteBase /

#http://stackoverflow.com/questions/3680463/mobile-redirect-using-htaccess
# Check if mobile=1 is set and set cookie 'mobile' equal to 1
RewriteCond %{QUERY_STRING} (^|&)mobile=1(&|$)
RewriteRule ^ - [CO=mobile:1:%{HTTP_HOST}]

# Check if mobile=0 is set and set cookie 'mobile' equal to 0
RewriteCond %{QUERY_STRING} (^|&)mobile=0(&|$)
RewriteRule ^ - [CO=mobile:0:%{HTTP_HOST}]

# cookie can't be set and read in the same request so check
RewriteCond %{QUERY_STRING} (^|&)mobile=0(&|$)
RewriteRule ^ - [S=1]

# Check if this looks like a mobile device
RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|ipad|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile" [NC,OR]
RewriteCond %{HTTP:Profile}       !^$
RewriteCond %{QUERY_STRING} !^mobile=0(?:&|$)
# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST}          !^m\.
# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP:Cookie}        !\mobile=0(;|$)
# Now redirect to the mobile site
RewriteRule ^ http://m.yourdomain.com%{REQUEST_URI} [R,L]

# Go back to full site
RewriteCond %{HTTP_HOST} ^m\.
RewriteCond %{QUERY_STRING} (?:^|&)mobile=0(?:&|$)
RewriteRule ^ http://yourdomain.com%{REQUEST_URI} [R,L]

RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [NC,L]

RewriteRule ^.*$ index.php [NC,L]

Redirect mobile devices to alternate version of my site

10 Answers10

Linked

Related