Okay Geek Farm
How to detect and redirect Phones and Tablets to a mobile website using Javascript
Chris Self
When making a mobile version of your website available to users, it’s important that they are automatically brought directly to it when visiting. Using JavaScript and the userAgent String and screen size detection, you can make it possible for a user to be automatically re-directed to a mobile website when they’re using a mobile device. Let’s get coding.
userAgent (iPhone)
<script type=”text/javascript”> if((navigator.userAgent.match(/iPhone/i))) {if (document.cookie.indexOf(“iphone_redirect=false”) == -1) window.location = “http://m.okaygeek.com”;}</script>
Whether it’s an iPad or Blackberry, all mobile devices use a specific userAgent. In the code above, you’ll see that we’re looking to detect an iPhone and send the user to “http://m.okaygeek.com”. Other common userAgents for Apple devices include ‘iPhone’ and ‘iPad’. For a full list of mobile devices userAgents, visit Mobile Phone Specs.
Screen Dimension
<script type=”text/javascript”> if ((screen.width>=640) && (screen.height>960) { window.location=”http://okaygeek.com”; } else { window.location=”http://m.okaygeek.com”; } </script>
Detecting mobile devices based on their screen dimensions is simple. However, you’ll notice that this script looks for no single device. In simple terms, the code above reads:
“If the screen size of the device visiting our website is greater than or equal to 640 by 960 pixels, open our home page. All remaining devices that do not adhere to the previous statement should be sent to our mobile website.”
This script is very flexible. For instance, if you’d like to target a specific resolution, set the width and height equal to it’s values. If you’re confused about the greater than, less than and equal signs, the list below should clear things up for you.
- screen.height>= greater than or equal to
- screen.height<+ less than or equal to
- screen.height> greater than
- screen.height< less than
- screen.height= equal to
Make sure you are doing this in a test environment. If you activate this script on your site without a back door in to test and change it, you could lock yourself out of your own site.
Conclusion
There are many ways to detect and redirect mobile devices on your website. As a web designer however, I found these two work great and require less programming. If you’re interested in using either of these scripts, they’re best placed in the <head> section of your HTML document.
