The practicalities of CSS Media Queries, lessons learned | Hacker News Reader

The practicalities of CSS Media Queries, lessons learned

blog.bloop.co

25 pointsdaleharvey13 comments

I guess my point to this was to show how simple it is to tailor a website to mobile webkit users. For example, HN isn't using any media queries and in probably 30 minutes it could be perfectly nice to read and respond to comments on my phone.

I'll volunteer an hour to do it.

Is there any way to have custom css files inserted into the Android web browser? Then we don't need to ask pg et al. To do this, we can do it ourselves.

Possibly, I'll have a look. Seems a very long way around for a tiny benefit. Maybe I'll try asking pg and see if it's gets anywhere.

I would be very interested if this is possible. It could be used for different sites aswell, not just HN

A mate of mine just said it would be possible for firefox on android via a plugin, but he didn't think so for the standard webkit browser.

for your issue with wanting to swap stylesheets when the user clicks (mobile | standard) or whatever, try doing all your media queries in the stylesheet <link> tags themselves, then using javascript to unset all the media="" parts, or change them so that the correct stylesheet applies, rather than faking browser width that might fuck around with other JS functions

Thanks lenary, I guess that'd be fine for a small amount of adjusted styles for mobile. Becomes a bit of a mess pretty quickly though.

"user-agent sniffing (long since shown to be a terrible idea)"

Wrong. On mobile the consensus is this is a sad necessity. There are services to automate and abstract this so you aren't manually creating your own UA DB.

It seems like this article makes it clear that it's not really a necessity. FWIW, I've been redirected to mobile sites on several occasions just because my desktop browser is Opera.

Not that this can't be taken care of with a little careful coding, just saying that user-agent sniffing is still troublesome, and separating desktop from mobile can be tricker than expected.

> Wrong. On mobile the consensus is this is a sad necessity.

Is it still? I think that by now the only browsers that don't support Media Queries are so old and primitive, that they're not getting used anyway (those toys on featurephones that crash on any site other than operamini.com, previous generation BlackBerry that shows progressbar during execution of JavaScript, etc.)

Everything worth using, from Opera Mini to Androids and iPhones supports Media Queries and can swallow few extra KB of markup.

"For the user: she visits http://bloop.co/ and instead of viewing the regular webpages, the page content is styled appropriately for small screens."

Not in the Android standard browser.

I've written for screens smaller than 480px. I have an android that, landscape, is 860px or something. In that case it won't work, and I'd rather not make the assumption that it's a mobile screen.

I presume your android is larger than 480px and that's why you say this?

It is, but the page is unwieldy and overly wide on that browser.

Looks like there's a big gap between "small screens" and "screens that can comfortably display the page".

Reply on news.ycombinator.com