CSS3: Detecting devices with media queries

CSS3 has media queries that enables conditions to check device properties such as width, height and orientation and applies different stylesheet definition based on these conditions.

This is useful since we’re able to browse via different devices with different sizes and we want to ensure the site is displayed optimally and more legible.

Very often I leave a site immediately if the website is not responsive when browsing from my mobile device. It’s too much pain to zoom in, scroll left and right etc.

CSS3 markup template

Here’s a template for responsive websites, which detects different screen resolutions for desktops, and major mobile devices and tablets:

/* desktops */
@media screen and (max-width : 1024px) { }
@media screen and (max-width : 800px) { }
@media screen and (max-width : 640px) { }

/* smartphones and iPhones */
@media screen and (min-width: 320px) and (max-width: 480px) { }
/* iPad with landscape */
@media screen and (max-width: 1024px) and (orientation: landscape) { }
/* iPad with portrait */
@media screen and (max-width: 768px) and (orientation: portrait) { }

For further reading about CSS3 media queries and more variety of properties to use, read the w3C document.

Leave a Reply

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