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:
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! :)
This is really helpful, thanks! Could you explain more about how you calculated the device width based on the resolutions?
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? :)
Pingback: Powerful New CSS Techniques and Tools | redbey
Pingback: Powerful New CSS Techniques and Tools « e-wok.fr, le blog
Pingback: Powerful New CSS Techniques and Tools
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.
Pingback: Powerful New CSS Techniques and Tools | Remake Wordpress Theme
i suppose this is assuming this is a non-fullscreen web app
using phonegap, it will assume the device dimension size
Pingback: Powerful New CSS Techniques and Tools « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates
Pingback: Powerful New CSS Techniques and Tools | CRICKET ka FUNDA
Pingback: Quick List of Useful Sites and Tools I’m Using | Louise McComiskey
Pingback: Powerful New CSS Techniques and Tools | Sejix Technologies Blog
Pingback: Designing for mobile: Part II | chroni.ca | Women, technology, multilingualism, sustainability.
Pingback: Powerful New CSS Techniques and Tools | Inspire Technologies
Pingback: 21 top tools for responsive web design | Five Star Web Solution
Pingback: Responsive Webdesign (5) – Media Queries für iPhone, Android Smartphone und Blackberry - Allgemein
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?
Pingback: Veckans länktips – 2011-09-25 | lillbra.se
Pingback: New CSS Techniques and Tools | W Design Love | Graphic and Web Design Blog | Coding | tutorials | freebies | Wordpress | inspiration | Blog
Pingback: Powerful New CSS Techniques and Tools - Smashing Coding | Smashing Coding
Pingback: Impressive and Powerful New CSS 3 Effects, Tips and Tricks | rowefx blog
Pingback: 2012 CSS 3 Effects – Tips and Tricks
Pingback: Powerful New CSS Techniques and Tools | Designing, jQuery, Ajax, PHP, MySQL, Templates and More
Pingback: Powerful New CSS Techniques and Tools - Goodfav Howto