Using Mod-rewrite to serve mobile versions of a page - http

Question

I'd like to use Mod-rewrite to serve different versions of my page to different devices. For example, I would send a different version to a device with a 1920 x 1024 monitor than I would to an iPhone. It seems like I want to have Mod-rewrite make its decision based on the content of HTTP_USER_AGENT and I'm wondering who is keeping track of what an iPad Air 2 puts in that variable, what an iPhone 6 puts, etc., etc., etc. There must be a huge table somewhere that's up to date.
Thanks for any help

Answer 1

What's in a User-Agent?
It's not the device but the browsing software being used on it that reports its HTTP_USER_AGENT to a web server. In addition to the browser's name and version information, it typically includes the platform or device name as well as the OS version its currently running on.
For example, the latest Firefox 36 reports the following user-agent
Mozilla/5.0 (Windows NT 6.3; rv:36.0) Gecko/20100101 Firefox/36.0
which includes its version 36.0, the platform it's running on Windows and the OS version 6.3 i.e. Windows 8.1. The browsers usually also report if the system is 64-bit WOW64and the user's locale, although the default en-US is often missing.
Here's what Safari reports on Windows 7 and an iPad:
Mozilla/5.0 (Windows; U; Windows NT 6.1; fr-FR) AppleWebKit/533.20.25 (KHTML, like Gecko) Version/5.0.4 Safari/533.20.27
Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5355d Safari/8536.25
And, that's pretty much it. You won't receive detailed information like the device generation (is it an iPad 2?) or its display metrics (the resolution the screen is running on).
So, while you can determine the class of the device (desktop or mobile) and serve alternate content, you can't serve resolution-specific content. So, how does other websites do it? Well, the answer is..
HTML5
HTML5 lets you write dynamic layouts that adjust to the available screen real estate automatically. So, while on a desktop it would render your site in a 3x2 layout, it can automatically switch to 1x6 one on a mobile browser. The best part is that it works independent of the user-agent; so you'll see it auto-adjust the layout on a desktop browser too (when you resize it) as well as work on a mobile browser with its desktop-mode on where it purposely reports a different user-agent to receive the desktop version of your site.
User-Agent Repositories
But, user-agents still do come handy. There's no standardized repository as such but there are plenty of sites that keep track of user-agent strings like user-agents.org, httpuseragent.org, useragentstring.com etc. The last one has been kept the most up to date.
You obviously can't match all of them so would do a sub-string match instead like
RewriteCond %{HTTP_USER_AGENT} (ipad|iphone|ipod|mobile|android|blackberry|palmos|webos) [NC]
Take a look at Mobile Redirect using htaccess for the different user-agents other have been using for their .htaccess(s) successfully.
Using JavaScript
I remember couple of years ago when I used to visit Google Search, it would profile my browser and redirect to itself with the display resolution attached to the query string. I believe they did it for analytics rather than the layouts. Now they encode everything (even their cookies) so you can't exactly tell what they're making a note of.
If you're interested in something similar, JavaScript can help you with that: window.screen.width and window.screen.height will give you the client's resolution. If you're only interested in the actual screen space the browser has to render your site, use availWidth and availHeight instead.
So, your <script> could redirect to resolution specific pages as
<script type="text/javascript">
if ((screen.width >= 1280) && (screen.height >= 720)) {
window.location.replace('http://example.com/index-hi.html');
} else if ((screen.width >= 1024) && (screen.height >= 600)) {
window.location.replace('http://example.com/index-med.html');
} else {
window.location.replace('http://example.com/index-low.html');
}
</script>
Or, you could set a cookie and serve pages from a resolution specific directory using .htaccess.