Auto detect mobile browser via user-agent

Question

How can I detect if a user is viewing my web site from a mobile web browser so that I can then auto detect and display the appropriate version of my web site

User · Answer

I put this demo with scripts and examples included together:

http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/

This example utilizes php functions for user agent detection and offers the additional benefit of permitting users to state a preference for a version of the site which would not typically be the default based on their browser or device type. This is done with cookies (maintained using php on the server-side as opposed to javascript.)

Be sure to check out the download link in the article for the examples.

Hope you enjoy!

User · Answer

Yes user-agent is used to detect mobile browsers  There are lots of free scripts available to check this  Here is one such php code which will help you redirect mobile users to different website

User · Answer

You can check the User-Agent string  In JavaScript  that s really easy  it s just a property of the navigator object   var useragent   navigator userAgent    You can check if the device if iPhone or Blackberry in JS with something like  var isIphone     agent match  iPhone i       isBlackberry     agent match  blackberry i     if isIphone is true you are accessing the site from an Iphone  if isBlackBerry  you are accessing the site from a Blackberry    You can use  UserAgent Switcher  plugin for firefox to test that   If you are also interested  it may be worth it checking out my script  redirection mobile js  hosted on github here https   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

User · Answer

protected void Page Load object sender  EventArgs e        if  Request Browser IsMobileDevice    true                Response Redirect  Mobile  home aspx              This example works in asp net

User · Answer

for ANDROID   IPHONE  IPAD  BLACKBERRY  PALM  WINDOWS CE  PALM         lt script language  javascript  gt   lt  --      var mobile     iphone ipad ipod android blackberry mini windows sce palm i test navigator userAgent toLowerCase                    if  mobile                      alert  MOBILE DEVICE DETECTED                      document write   lt b gt ------------------------------------------ lt br gt                      document write   lt b gt     navigator userAgent     lt br gt                      document write   lt b gt ------------------------------------------ lt br gt                      var userAgent   navigator userAgent toLowerCase                      if   userAgent search  android    gt  -1   amp  amp   userAgent search  mobile    gt  -1                            document write   lt b gt  ANDROID MOBILE  lt br gt                       else if   userAgent search  android    gt  -1   amp  amp    userAgent search  mobile    gt  -1                          document write   lt b gt  ANDROID TABLET  lt br gt                       else if   userAgent search  blackberry    gt  -1                          document write   lt b gt  BLACKBERRY DEVICE  lt br gt                       else if   userAgent search  iphone    gt  -1                          document write   lt b gt  IPHONE DEVICE  lt br gt                                     else if   userAgent search  ipod    gt  -1                          document write   lt b gt  IPOD DEVICE  lt br gt                   else if   userAgent search  ipad    gt  -1                          document write   lt b gt  IPAD DEVICE  lt br gt                           else                    document write   lt b gt  UNKNOWN DEVICE  lt br gt                                  else                   alert  NO MOBILE DEVICE DETECTED      -- gt   lt  script gt

User · Answer

Yes  reading the User-Agent header will do the trick    There are some lists out there of known mobile user agents so you don t need to start from scratch  What I did when I had to is to build a database of known user agents and store unknowns as they are detected for revision and then manually figure out what they are  This last thing might be overkill in some cases   If you want to do it at Apache level  you can create a script which periodically generates a set of rewrite rules checking the user agent  or just once and forget about new user agents  or once a month  whatever suits your case   like  RewriteEngine On  RewriteCond   HTTP USER AGENT   OneMobileUserAgent AnotherMobileUserAgent      RewriteRule      mobile  1   which would move  for example  requests to http   domain index html to  http   domain mobile index html  If you don t like the approach of having a script recreate a htaccess file periodically  you can write a module which checks the User Agent  I didn t find one already made  but found this particularly appropriate example  and get the user agents from some sites to update them  Then you can complicate the approach as much as you want  but I think in your case the previous approach would be fine

User · Answer

You haven t said what language you re using   If it s Perl then it s trivial   use CGI  Info   my  info   CGI  Info- gt new     if  info- gt is mobile           Add mobile stuff    unless  info- gt is mobile           Don t do some things on a mobile

User · Answer

Here s how I do it in JavaScript   function isMobile       var index   navigator appVersion indexOf  Mobile      return  index  gt  -1       See an example at www tablemaker net test mobile html where it triples the font size on mobile phones

User · Answer

Just a thought but what if you worked this problem from the opposite direction   Rather than determining which browsers are mobile why not determine which browsers are not   Then code your site to default to the mobile version and redirect to the standard version   There are two basic possibilities when looking at a mobile browser   Either it has javascript support or it doesn t   So if the browser does not have javascript support it will default to the mobile version   If it does have JavaScript support  check the screen size   Anything below a certain size will likely also be a mobile browser   Anything larger will get redirected to your standard layout   Then all you need to do is determine if the user with JavaScript disabled is mobile or not  According to the W3C the number of users with JavaScript disabled was about 5  and of those users most have turned it off which implies that they actually know what they are doing with a browser   Are they a large part of your audience   If not then don t worry about them   If so  whats the worst case scenario   You have those users browsing the mobile version of your site  and that s a good thing

User · Answer

The Mobile Device Browser File is a great way to detect mobile  and other  broswers for ASP NET projects  http   mdbf codeplex com

User · Answer

My favorite Mobile Browser Detection mechanism is WURFL  It s updated frequently and it works with every major programming language platform

User · Answer

MobileESP has  PHP  Java  APS NET  C    Ruby and JavaScript hooks  it has also the Apache 2 licence  so free for commercial use  Key thing for me is it only identifies browsers and platforms not screen sizes and other metrics  which keeps it nice an small

User · Answer

You can detect mobile clients simply through  navigator userAgent   and load alternate scripts based on the detected client type as      document  ready function e             if navigator userAgent match  Android i               navigator userAgent match  webOS i               navigator userAgent match  iPhone i               navigator userAgent match  iPad i               navigator userAgent match  iPod i               navigator userAgent match  BlackBerry i               navigator userAgent match  Windows Phone i                 write code for your mobile clients here             var jsScript   document createElement  script              jsScript setAttribute  type    text javascript              jsScript setAttribute  src    js alternate js file js              document getElementsByTagName  head   0  appendChild jsScript               var cssScript   document createElement  link              cssScript setAttribute  rel    stylesheet              cssScript setAttribute  type    text css              cssScript setAttribute  href    css alternate css file css              document getElementsByTagName  head   0  appendChild cssScript               else              write code for your desktop clients here

User · Answer

There s a brand new solution using Zend Framework  Start from the link to Zend HTTP UserAgent   http   framework zend com manual en zend http html

User · Answer

There are open source scripts on Detect Mobile Browser that do this in Apache  ASP  ColdFusion  JavaScript and PHP

User · Answer

Have you considered using css3 media queries  In most cases you can apply some css styles specifically for the targeted device without having to create a separate mobile version of the site    media screen and  max-width 1025px        content        width  100            You can set the width to whatever you want  but 1025 will catch the iPad landscape view   You ll also want to add the following meta tag to your head    lt meta name  viewport  content  width device-width  initial-scale 1  maximum-scale 1  gt    Check out this article over at HTML5 Rocks for some good examples

[html] Auto detect mobile browser (via user-agent?)

Examples related to html

Examples related to windows-mobile

Examples related to browser

Examples related to user-agent