Detect if a browser in a mobile device iOS Android phone tablet is used

Question

Is there a way to detect if a handheld browser is used  iOS Android phone tablet    I tried this with the goal to make an element half as wide in a browser on a handheld device but it doesn t make a difference   width  600px   media handheld   width  300px      Can it be done and if so how   edit  From the referred page in jmaes  answer I used   media only screen and  max-device-width  480px

User · Answer

Don t detect mobile devices  go for stationary ones instead   Nowadays  2016  there is a way to detect dots per inch cm px that seems to work in most modern browsers  see http   caniuse com  feat css-media-resolution   I needed a method to distinguish between a relatively small screen  orientation didn t matter  and a stationary computer monitor   Because many mobile browsers don t support this  one can write the general css code for all cases and use this exception for large screens    media  max-resolution  1dppx                      Both Windows XP and 7 have the default setting of 1 dot per pixel  or 96dpi   I don t know about other operating systems  but this works really well for my needs   Edit  dppx doesn t seem to work in Internet Explorer   use  96 dpi instead

User · Answer

Detecting mobile devices  Related answer  https   stackoverflow com a 13805337 1306809  There s no single approach that s truly foolproof  The best bet is to mix and match a variety of tricks as needed  to increase the chances of successfully detecting a wider range of handheld devices  See the link above for a few different options

User · Answer

I know this is an old thread but I thought this might help someone   Mobile devices have greater height than width  in contrary  computers have greater width than height  For example    media all and  max-width  320px  and  min-height  320px    so that would have to be done for every width i guess

User · Answer

Many mobile devices have resolutions so high that it s hard to distinguish between them and much larger screens  There are two ways to deal with this problem   Use the following HTML code to scale the pixels  grouping smaller pixels into groups the size of the unit pixel - 96dpi  so px units will have the same physical size on all screens   Note that this will affect the scale of pretty much everything in your website  but this is generally the way to go when making sites mobile-friendly    lt meta name  viewport  content  width device-width  initial-scale 1  gt    Alternatively  measuring the screen width in  media queries using cm instead of px units can tell you if you re dealing with a physically small screen regardless of resolution

User · Answer

Update  June 2016   I now try to support touch and mouse input on every resolution  since the device landscape is slowly blurring the lines between what things are and aren t touch devices  iPad Pros are touch-only with the resolution of a 13  laptop  Windows laptops now frequently come with touch screens   Other similar SO answers  see other answer on this question  might have different ways to try to figure out what sort of device the user is using  but none of them are fool-proof  I encourage you to check those answers out if you absolutely need to try to determine the device     iPhones  for one  ignore the handheld query  Source   And I wouldn t be surprised if other smartphones do  too  for similar reasons   The current best way that I use to detect a mobile device is to know its width and use the corresponding media query to catch it  That link there lists some popular ones  A quick Google search would yield you any others you might need  I m sure   For more iPhone-specific ones  such as Retina display   check out that first link I posted

User · Answer

I believe that a much more reliable way to detect mobile devices is to look at the navigator userAgent string   For example  on my iPhone the user agent string is      Mozilla 5 0  iPhone  CPU iPhone OS 10 3 2 like Mac OS X  AppleWebKit 603 2 4  KHTML  like Gecko  Version 10 0 Mobile 14F89 Safari 602 1   Note that this string contains two telltale keywords  iPhone and Mobile   Other user agent strings for devices that I don t have are provided at   https   deviceatlas com blog list-of-user-agent-strings  Using this string  I set a JavaScript Boolean variable bMobile on my website to either true or false using the following code   var bMobile        will be true if running on a mobile device   navigator userAgent indexOf   Mobile        -1       navigator userAgent indexOf   iPhone        -1       navigator userAgent indexOf   Android        -1       navigator userAgent indexOf   Windows Phone        -1

User · Answer

Here s how I did it    media  pointer none    pointer coarse        Based on https   stackoverflow com a 42835826 1365066

User · Answer

Simple  Throw this at the like  bottom of your CSS file and this part of the CSS will be modified within a phone  -    ON A PHONE     media only screen and  max-width  600px       CSS HERE ONLY ON PHONE       And voila

[css] Detect if a browser in a mobile device (iOS/Android phone/tablet) is used

Examples related to css

Examples related to media-queries