0

What are all screen CSS media queries for iPhone Android and Blackberry? Is there a list of all these? In both portrait and landscape.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) 
{
    /* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) 
{
    /* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) 
{
    /* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) 
{
    /* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) 
{
    /* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) 
{
    /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) 
{
    /* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) 
{
    /* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) 
{
    /* Styles */
}

The final product is geared towards the Android, iPhone and Blackberry platforms, are what interest me most.

Is there anything else I should append? Or maybe one of these should I replace it with?

Thanks in advance, comrades!

candlejack
  • 1,189
  • 2
  • 22
  • 51

1 Answers1

1

Here's a list of media queries for iOS devices.

For Android devices, I tend to target all the different dpi ranges (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) as opposed to the different screen sizes because there's just too many. Their scales can be found in this SO answer.

Hope this helps.

Community
  • 1
  • 1
Mr.P
  • 1,390
  • 13
  • 35