redirect kindle fire to mobile website using .htaccess

[onyxtacular]

re: [webmasterworld.com...] I'm trying to redirect mobile traffic to my mobile website. As I only have a kindle fire to test to see if things are going as planned I would like to know what part of the user agent string do I have to put in the following code:

RewriteEngine On
RewriteBase /

RewriteCond %{HTTP_USER_AGENT} android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge\ 
|maemo|midp|mmp|opera\ m(ob|in)i|palm(\ os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows\ 
(ce|phone)|xda|xiino [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a\ wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r\ |s\ )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd
\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1\ u|g560|gene|gf\-5|g
\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(\ i|ip)|hs\-c|ht(c(\-|\ 
|_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(\ |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(\ |\/)|klon|kpt\ 
|kwc\-|kyo(c|k)|le(no|xi)|lg(\ g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|
02|bi|de|do|t(\-|\ |o|v)|zz)|mt(50|p1|v\ )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)
|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|
\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55
\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk
\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v\ )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg
\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|
5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)
|w3c(\-|\ )|webc|whit|wi(g\ |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-) 
[NC]
RewriteRule ^$ http://m.mywebsite.com/ [R,L] 

The user agent string for the my Kindle fire is:

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.112 Safari/535.1

based on the information I gleaned from [whatsmyuseragent.com...]


Any help is appreciated:)

[edited by: engine at 8:42 am (utc) on May 30, 2013]
[edit reason] scrolling [/edit]

[phranque]

welcome to WebmasterWorld, onyxtacular!


i don't see anything in that user agent string that would specifically identify the visitor as a mobile visitor.
have you considered using a solution that responds to viewport size rather than user agent?

[onyxtacular]

I never heard of that before...firing up google now :)

[phranque]

site:webmasterworld.com responsive design - Google Search:
http://www.google.com/search?q=site%3Awebmasterworld.com%20responsive%20design [google.com]

[onyxtacular]

I checked into the viewport size, but for my situation the useragent route would be better. Thanks for your input :)

[Samizdata]

Sounds like your Kindle's browser is set to "Mobile View=Off".

The usual way to detect a Kindle is with the strings "kindle" and "silk", one of which should appear in the UA when Mobile View is on - not a foolproof detection method, but at least you should be able to test that your script is working.

...

[onyxtacular]

Can you tell me from the data above...the .htaccess script and the useragent...what do I take from the string to put in the script? I do not see a correlation between the two

[Samizdata]

what do I take from the string to put in the script?

Apologies if I was unclear.

I don't have a Kindle, but my understanding is that if the browser is set to "Mobile View=Off" then it will send a user-agent string falsely claiming to be a standard computer browser and will not be caught by your .htaccess rules.

Apparently, if you set the browser to "Mobile View=On" (however this is done) the user-agent will contain either the word "Kindle" or the word "Silk" and be detectable.

Your first condition already has "kindle" and is case-insensitive, so you should only need to add "silk" with another pipe seperator.

I can't vouch for the rest of the code, and generally advise against copy/pasting anything you don't understand into .htaccess - if you get it wrong your site will become inaccessible.

I think phranque was on the money - the modern way to deal with handheld devices is with responsive design.

...

[lucy24]

Overlapping a few earlier posts, so there may be redundancies

Ouch. Is this happening in htaccess or config? Most of the time it doesn't make a huge difference. But you're got a horrendously complicated group of Regular Expressions there. If they're in the config file they will be compiled just once, at server startup. In htaccess they have to be recompiled every single time the rule executes, which could bring the server to a crawl.

Constraining the rule to page requests is a definite step in the right direction. But with

^$

you've constrained it to the front page only, which creates a different problem. What if someone has a different page bookmarked or linked? The landing page may not be the front page-- and, conversely, the front page may not be the landing page.

There are further issues. Picking a segment at random:

palm(\ os)?|phone|p(ixi|re)\/

If the " OS" element is optional-- and there's no closing anchor-- why does it need to be there at all?

Slashes do not need to be escaped in mod_rewrite. (There are a couple of mods where you do need to-- same principle as in programming languages where regular expressions are delimited with /slashes/ --but these are exceptions.)

If you have a pipe-delimited group, enclose the whole thing in parentheses-- in this case, non-capturing ones. This is for your own safety and sanity; throw an anchor into the mix, and suddenly the rule does something completely different from what you intended.

It is probably easier to detect mobile devices negatively: If the UA isn't one of a handful of standard browsers, it's a cell phone. But you also need to consider tablets. These can go either way depending on the site: for display purposes they generally behave like browsers; for user-interface purposes they're more like cell phones.

For insurance, give the user a way to override your redirect. A simple cookie will do. mod_rewrite can read and set cookies; you don't have to go off and learn a separate "cookie language" ;)

[onyxtacular]

First I'd like to thank everyone for their help. This is a foreign area to me. I don't know the first thing about .htaccess. Our main site was done a few years ago in flash now with all the mobile devices out there we are scrambling to put something out there they can view. From what I can tell this one is working for the major devices but not the kindle fire or the nook (which is the one my boss has). I'll look for some coding that detects the mobile devices negatively as Lucy24 suggested. Can anyone recommend a good site that has tutorials and/or sample code in this respect?

Thanks

[Samizdata]

I don't know the first thing about .htaccess

You can learn a huge amount from older posts in this forum, but .htaccess is a powerful tool that must be used with great care. I wouldn't use it for browser sniffing myself (I use PHP where necessary).

Our main site was done a few years ago in flash

That is the problem you really need to address.

Flash was a great option back in the day (2000-2005) but even then it was necessary to provide alternate HTML content for those without the Flash plugin.

Rather than a mobile site you might do better to use SWFObject to provide a lightweight HTML alternative - all modern mobiles that actually browse the web can handle a simple site, and rather than detect an ever-expanding list of user-agents you only need to detect the Flash plugin (which SWFObject does for you).

...

[DrDoc]

Just so it's said -- having a site built in flash was never a great option ... for anyone.

I would agree, however, that replacing your flash site with a modern HTML/CSS/JS site is time well spent, and a first step towards making your site accessible to everyone.

I don't quite understand the scramble to do this, however, as mobile devices have been common for years, and flash sites have been obsolete since, well, the beginning.

[onyxtacular]

With all this knowledge on the subject of flash, HTML, CSS,JS can anyone answer the question? If you rather armchair quarterback a business decision made years ago, feel free, but I thought the was a place to come to ask questions and get answers from those that know the answers. Being snobbish with knowledge is just as bad as being blissfully ignorant.

[DrDoc]

It was already answered above:

The usual way to detect a Kindle is with the strings "kindle" and "silk", one of which should appear in the UA when Mobile View is on - not a foolproof detection method, but at least you should be able to test that your script is working.

phranque also linked you a useful Google search:

site:webmasterworld.com responsive design - Google Search:
[google.com...]

As for other methods, you really have tons of options:

Redirect based on UA detection

Redirect based on detecting the client network as mobile

Redirect based on screen size (not recommended as it makes assumptions about JavaScript and Cookie capabilities)

Use @media (or media attribute) to serve different CSS (ideal scenario, but you need to know your visitors first)

Your current approach is to detect the UA. While it appears to match a wide range of mobile UAs correctly, maintenance is a headache. And, there's always the odd issue of when UA detection falls short (as you have already noticed).

I would research the different methods above and find which one fits you best. Dive in well armed with full knowledge of what your current users look like (devices, browsers, percentages, etc), and which crowd you are attempting to please.

Also -- while you might not like the answer -- getting rid of flash is really a smart decision as it will make your site usable by everyone. Most mobile devices can already handle a regular HTML site quite well. Choose an approach that does not specifically cater to a limited crowd (i.e. mobile users), but rather opens up and improves for everyone (desktop, mobile, tablet, hybrid .. search engines!). You will also find that site maintenance will become much easier.

Just because a business decision was made years ago doesn't mean it was the right decision, nor that it should be ignored when trying to address something seemingly different. Replacing your flash site is simply the best place to start.

[DrDoc]

Also, I realize we failed to welcome you properly, so:

Welcome to WebmasterWorld!