CODEWITHSUNDEEP
cssmedia-queries
ivvi
ivvi

Reputation: 5300

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

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).

Upvotes: 92

Views: 259127

Answers (10)

Adam John
Adam John

Reputation: 121

Here are solutions using 2 different methods:

Using CSS:

/* if device has a touch screen */
@media (any-pointer: coarse) {
    /* do your own styles */
    .yourDiv:active {
        background-color:red; 
    }
}

/* if device has no touch screen */
@media (any-pointer: fine) {
    /* do your own styles */
    .yourDiv:active {
        background-color:green; 
    }
}

Important note:
For the code to work on all devices you must use any-pointer, not pointer

Using JavaScript:

/* returns a true value if device has a touch screen no matter what 
type of device it is */ 
var isTouchScreen = 'ontouchstart' in window || navigator.msMaxTouchPoints;

if(isTouchScreen === true) {
alert("You are using a touch screen")
} else {
 alert("You are not using a touch screen")
}

Upvotes: 12

Bonez024
Bonez024

Reputation: 1398

I would probably opt for a JS-based approach instead since there does not seem to be a reliable/uniform way of doing this with pure css.

You could use javascript to make your detection - Illustrated here: What is the best way to detect a mobile device?

Then you could simply add something like this to your clientside code:

  $("div").addClass("Mobile-Based-Class");

Upvotes: 1

Messiah Jesus Slave of RAHMAN
Messiah Jesus Slave of RAHMAN

Reputation: 37

CSS Level 5 Media Queries are best for this

below code styles css for touch screen devices except old androids and windows touch screens because windows touch screens are hover-able devices with mouse pointer...

@media (hover: none) { /* css for touch screen devices except old androids and windows touch screens because windows touch screens are hover-able devices with mouse pointer... */ }

Upvotes: 0

potato
potato

Reputation: 1123

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.

<meta name="viewport" content="width=device-width, initial-scale=1">

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.

Upvotes: 9

jamesplease
jamesplease

Reputation: 12869

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.

Upvotes: 47

GrayFace
GrayFace

Reputation: 1381

Here's how I did it:

@media (pointer:none), (pointer:coarse) {
}

Based on https://stackoverflow.com/a/42835826/1365066

Upvotes: 69

Jesse Heines
Jesse Heines

Reputation: 131

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 ;

Upvotes: 8

m33x
m33x

Reputation: 19

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.

Upvotes: -3

LGT
LGT

Reputation: 5034

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.

Upvotes: 14

Matt Coughlin
Matt Coughlin

Reputation: 18896

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.

Upvotes: 10

Related Questions