Revisit Hardboiled CSS3 Media Queries

Hardboiled CSS3 Media Queries is a very good boilerplate made by Andy Clarke, and it’s modified and included in Mobile HTML5 Boilerplate beta. Part of it uses 480px as max-device-width:

/* 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) and (max-device-width: 480px) {
/* Styles */
}

A recent mobile development makes me think maybe this has to be tweaked. HTC Desire HD skips this rule, it has an unusually large screen. The resolution is 480 x 800. When you set content to ‘width=device-width’ in viewport meta, the resolution becomes 320 x 800/(480/320), which is 320 x 533.33333, which is then rounded to 320 x 533.

To confirm if my guess was right, I did an alert:

HTC Desire HD height

Bingo! So after replacing 480px with 533px, this fixed the problem. Later when I refer to the Smartphone Front-end Matrices I have been collaborating, the biggest screen is not HTC Desire HD, but DROID 2 Global by Motorola, A956. It has a resolution of 480 x 854, which means 320 x 569 in mobile terms. So far I haven’t see a smartphone screen that’s bigger than this. So now the boilerplate has to be tweaked to:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 569px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (max-device-width: 569px) {
/* Styles */
}

Hope this helps! :)

Be Sociable, Share!

About Shi Chuan

I am a web developer.
This entry was posted in Mobile and tagged , . Bookmark the permalink.

28 Responses to Revisit Hardboiled CSS3 Media Queries

  1. This is really helpful, thanks! Could you explain more about how you calculated the device width based on the resolutions?

  2. admin says:

    I have an early article named The complete idiot’s guide to pixels on mobile, in it, I explained most things about pixels and mobile. Maybe this could help? :)

  3. Pingback: Powerful New CSS Techniques and Tools | redbey

  4. Pingback: Powerful New CSS Techniques and Tools « e-wok.fr, le blog

  5. Pingback: Powerful New CSS Techniques and Tools

  6. Jen says:

    I have seen this as well and did a small post about it today. My issue was the HTC Incredible was initially reporting as 480×800 then, after reload, reporting 320×533. On the initial page load, it loaded the desktop style sheets because of the 480×800 resolution. After reload, it loaded the proper mobile style sheet. I replicated the error by putting an alert in the head section, clearing the cache, closing the browser, and loading up the page. Then I reloaded and got the other ‘new’ value.

    I got around by using a max-device-width of 800px for mobile and min-device-width of 801px for desktop. I am not convinced that I am correct in doing it this way, but it works.

  7. Pingback: Powerful New CSS Techniques and Tools | Remake Wordpress Theme

  8. gary says:

    i suppose this is assuming this is a non-fullscreen web app

    using phonegap, it will assume the device dimension size

  9. Pingback: Powerful New CSS Techniques and Tools « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates

  10. Pingback: Powerful New CSS Techniques and Tools | CRICKET ka FUNDA

  11. Pingback: Quick List of Useful Sites and Tools I’m Using | Louise McComiskey

  12. Pingback: Powerful New CSS Techniques and Tools | Sejix Technologies Blog

  13. Pingback: Designing for mobile: Part II | chroni.ca | Women, technology, multilingualism, sustainability. 

  14. Pingback: Powerful New CSS Techniques and Tools | Inspire Technologies

  15. Pingback: 21 top tools for responsive web design | Five Star Web Solution

  16. Pingback: Responsive Webdesign (5) – Media Queries für iPhone, Android Smartphone und Blackberry - Allgemein

  17. Christian says:

    Now we just need Andy Clarke to implement these in 320 and Up and then for HTML5 Boilerplate to integrate his 320 and UP changes into the boilerplate. Then we’d only have to use the boilerplate.

    By the way, how come I don’t see the changes you mentioned here reflected in the style.css shown at http://html5boilerplate.com/mobile?

  18. Pingback: Veckans länktips – 2011-09-25 | lillbra.se

  19. Pingback: New CSS Techniques and Tools | W Design Love | Graphic and Web Design Blog | Coding | tutorials | freebies | Wordpress | inspiration | Blog

  20. Pingback: Powerful New CSS Techniques and Tools - Smashing Coding | Smashing Coding

  21. Pingback: Impressive and Powerful New CSS 3 Effects, Tips and Tricks | rowefx blog

  22. Pingback: 2012 CSS 3 Effects – Tips and Tricks

  23. Pingback: Powerful New CSS Techniques and Tools | Designing, jQuery, Ajax, PHP, MySQL, Templates and More

  24. Pingback: Powerful New CSS Techniques and Tools - Goodfav Howto

  25. Pingback: Powerful New CSS Techniques and Tools - Internet Business

  26. Pingback: Powerful New CSS Techniques and Tools | Smashing Magazine

  27. Pingback: cigarettes sale - buy online smokes

  28. Toni says:

    Excellent goods from you, man. I haave understand your stuff previous to and
    you are just too great. I really like what you’ve
    acquired here, really like what you are stating and the waay in which you say it.
    You make it enjoyabe and you still take care of to keewp it wise.
    I can not wait to read mch more from you.
    This is actually a great site.

    Check out my web page: school leaver hoodies
    (Toni)

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>