How to apply different CSS for mobile devices not just based on media width/height

Question

I want to show different CSS styles for some elements just for mobile devices, phones and tablets, but media queries with different widths do not work quite good just because let's say my phone and my 17" laptop both have the same full HD resolution and modern tablets have resolution bigger than most desktop monitors have...

So I want to apply CSS styles for android, iphone/ipad, blackberry, windows mobile devices that are phones/tablets.

Are there any ways?

http://css-tricks.com/snippets/css/retina-display-media-query/ — ediblecode, Nov 06 '13 at 10:19
in android you can check the device using '(getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_LARGE)' — Abhijit Muke, Nov 06 '13 at 10:24
@Paulie_D - if resolution is full HD, it means 1080p, or I am wrong? — CamSpy, Nov 06 '13 at 10:55

Baschi · Answer 1 · 2013-11-06T12:01:53.987

1

Media queries can not only use width. You can also use the orientation and even the device pixel ratio. So if you address something like a retina display then you can write it more or less as follows:

@media only screen 
   and (min-device-width : xxx px) 
   and (max-device-width : xxx px) 
   and (orientation : landscape or portrait)
   and (min-resolution: xxx dpi){ 

   // your css goes here

}

Take a look for a webkit specific example here!

edited Nov 06 '13 at 12:01

answered Nov 06 '13 at 10:25

Baschi

1,133
11
13

So, if i'll set min dpr 1.25, will that mean that more or less modern smartphones and tablets will be covered? – CamSpy Nov 06 '13 at 10:54
I do not get what you mean with **dpr 1.25**. Using the statement above you can e.g. address screens with a min-resolution of 200dpi. But this is only an indication that the actual screen is a Smartphone or Tablet. It might be also a new MacBook Pro with 220dpi resolution. To restrict it more device specific you then need to take into account the min-device-width, because a 15" MacBook Pro with 220dpi has a resolution of 2880x1800 and there is no Tablet/SmartPhone available with this values. To wrap up, you have to provide a lot of media types to accomplish your task. – Baschi Nov 06 '13 at 12:09
forgive me for dpr :) i meant dpi/ppi. IF it was about targeting new devices with hight dpi, it would be quite easy to make that, but I also want to target some older ones too, but then some 1920x1080 13" netbooks have 170dpi, Samsung Galaxy Tab 10.1 has 149dpi, etc.. How to find some universal media query? – CamSpy Nov 06 '13 at 12:44
Unfortunately there is no universal guideline about media queries. You are responsible for the thinks you want to accomplish and media queries are the right tool for this. You can find some discussion about possible breakpoints [here](http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile?rq=1). – Baschi Nov 06 '13 at 13:08
That disuccsion was more than 2 years ago. Things have changed drastically from then – CamSpy Nov 06 '13 at 13:30
Indeed! But that is not the point, the discussion there gives you the hints you need. Now you can use a combination of the filters to control the behaviour of your website at a very fine-granular level. But of course, this goes hand-in-hand with a lot of work on defining the media-types. – Baschi Nov 06 '13 at 13:40

score 1 · Answer 2 · answered Nov 06 '13 at 10:27

1

if ((getResources().getConfiguration().screenLayout & 
Configuration.SCREENLAYOUT_SIZE_LARGE) == Configuration.SCREENLAYOUT_SIZE_LARGE ||
(getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_XLARGE)
    ==          Configuration.SCREENLAYOUT_SIZE_XLARGE ){
        System.out.println('In Tablet');
    }else {
        System.out.println('In Phone');
    }

answered Nov 06 '13 at 10:27

Abhijit Muke

1,122
1
16
41

Thank you, while I don't yet fully understand what this javascript does, I would like the solution with just media queries if it is possible, and if not, then JS will come – CamSpy Nov 06 '13 at 10:53

score 1 · Accepted Answer · edited May 23 '17 at 10:24

One thing you can do is apply custom classes to the html element or body element using javascript by testing the userAgent.

see below:

What is the best way to detect a mobile device in jQuery?. So your solution would look something like this.

JS

/*
see the link above for other user agents. 
you could come up with a bit more sophisticate solution 
I'm sure but this would be a quick implementation.
*/
<script type="text/javascript">

//test if droid


if( /Android/i.test(navigator.userAgent) ) {
    $('body').addClass('device_android');
}

</script>

CSS

<style>

//css styles for android

.device_android element #id .orclass {
    //some styles for android specific styling here
}

</style>

Keep in mind though this targets the general device this does not address the variation in os version and browser etc. which in many cases proves to be the cause of js and css bugs.

Thanks, but I don't really want to use jquery – CamSpy Nov 09 '13 at 13:18 — CamSpy, Nov 09 '13 at 13:18

How to apply different CSS for mobile devices not just based on media width/height

3 Answers3

Linked