Devices and Media-query

Frontend developers, always are dealing with different devices and orientation.
Here I tried to find a table of view port specifications to use in media query.

Mobile phones:

  • 360☓640
  • 375☓667
  • 360☓720
  • 360☓760
  • 414☓736
  • 412☓846
  • 320☓568
  • 360☓740
  • 414☓896
  • 412☓732
  • 375☓812
  • 360☓760
  • 320☓570
  • 320☓534

So it seems that between 320px to 414px for width and 534px to 896px for height, could be considered as safe range for media query for mobile phones media query.
@media screen and (max-width:414px) and (orientation:portrait){}
@media screen and (max-width:896px) and (orientation:landscape){}

Tablets:

  • 768☓1024
  • 800☓1280
  • 1024☓1366
  • 834☓1112
  • 601☓962
  • 600☓1024

So we consider between 600px to 1024px for width and 962px to 1366px for height, as safe range for media query for Tablets media query.
@media screen and (min-width:600px) and (max-width:1024px)and (orientation:portrait){}
@media screen and (min-width:962px) and (max-width:1366px) and (orientation:landscape){}


Desktops:

  • 1920☓1080
  • 1366☓768
  • 1440☓900
  • 1536☓864
  • 1600☓900
  • 1280☓800
  • 1280☓1024
  • 1280☓720

So 1280px for min-width will be safe range for media query for Desktops media query.
@media screen and (min-width:1280px) and (orientation:landscape){}


Consoles:

For consoles I guess, 1280px to 1920px for width and 720px to 1080px for height, will be safe range for media query for Consoles media query.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s