The right css media query

1

Hi all, I need to create some different CSS rules based on the device that it is used to run my application, so that I can write an app that support (“based on”) new Google Material Design.

So I need to create different css file for different “device” and I know that I need to use css media query. But which is the best approach?

  1. webkit-min-device-pixel-ratio
  2. (min-device-width : 320px) and (max-device-width : 480px)

And where can I find an update media query list that includes new devices like iphone 6 ?

Thanks.

M.

2

Hi , @ziobudda did you get around this problem even i am looking for a way to port my app which supports all android devices , there is not much problem with apple iphones as its quite well documented and defined but its the android devices that need to be solved. @mhartington @Calendee any suggesting on how to tackle this, would be really helpful ?

3

Anything below android 4.1, we won’t support so that get’s rid of a lot of old devices.

For everything else, you should be able to just write you media queries and have them work.

http://caniuse.com/#feat=css-mediaqueries
http://caniuse.com/#feat=css-media-resolution

4

Try Media queries for apple devices

5

thanks @waterishail even i have taken assistance in writing css for apple devices and as i have mentioned above everything is well documented as far as apple is concerned the only problem is with the android devices there is no proper reference even for hdpi, ldpi, mdpi, xdpi, etc… standard sizes

6

Thanks for the reply. But what i am really trying to ask here is for some reference to what are the correct CSS media queries for standard android displays like hdpi, ldpi , xhdpi, etc as @waterishail as replied below and WIFI only for apple devices

7

Well that gets to the point that we’re in a webview and use css-pixels, not actual device pixels.

8

@mhartington thanks for sharing this !!! I am sure it will help me in making better decisions