Hacker News new | past | comments | ask | show | jobs | submit login

Good criticism, maybe I was unfair but resizing a browser pane to the width of a mobile device brought up scrollbars which was unexpected.



Sorry if this is a little off-topic, but I thought I’d mention it in case anyone’s curious...

The behaviour of CSS3 media queries is a little counter-intuitive (he said, politely) in this respect. The widths you match against in a media query explicitly include the width of any scroll bar[1], yet in general you have no way to control or even determine the width of such a scroll bar. That means if you write responsive CSS to match a mobile-friendly width of w pixels in a media query and then style your content to use the entire w pixel width you might expect to have, you can wind up with a horizontal scroll bar if your content is more than a screen long and your browser displays a vertical scroll bar that eats into the available width.

Mobile devices typically work around this by not displaying scroll bars full-time anyway, but if you resize a typical desktop browser window to the same size as the screen on a mobile device, you will sometimes get surprising results. The adjustment can be relevant if you’re designing wide layouts to take advantage of modern widescreen laptops as well, though at those resolutions you might be less concerned about leaving a few pixels spare in the width to allow for a vertical scroll bar that might appear.

[1] See http://www.w3.org/TR/css3-mediaqueries/#width


Just FYI, I read this article on a mobile device and did not see scrollbars.




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: