How to detect different devices by using media queries

css3

The next list of media queries are necessary to detect several devices (even in portrait and landscape orientation), thanks to CSS Tricks:

/* 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 ----------- */
@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

And this an extra:

Nowadays, Bootstrap is one of the most used CSS frameworks and it includes a responsive version called Bootstrap Responsive, you could download this from its official websiteBootstrap Responsive uses the next media queries in order to change the layout of your site:

@media (min-width: 768px) and (max-width: 979px) {
}
@media (max-width: 767px) {
}
@media (min-width: 1200px) {
}
@media (max-width: 480px) {
}
@media (min-width: 980px) {
}

Thanks for reading!

Be happy with your code

Alex Arriaga

 

Añade un Comentario

One comment on “How to detect different devices by using media queries”

Leave a Reply

Your email address will not be published. Required fields are marked *