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.

1 thought on “Devices and Media-query

Leave a Reply

Your email address will not be published.