

The practicalities of CSS Media Queries, lessons learned - daleharvey
http://blog.bloop.co/the-practicalities-of-css-media-queries-lesso

======
samcollins
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.

~~~
rmc
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.

~~~
samcollins
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.

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

~~~
samcollins
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.

------
lenary
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

~~~
samcollins
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.

------
throwaway34
"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.

~~~
powrtoch
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.

------
Semiapies
" _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.

~~~
samcollins
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?

~~~
Semiapies
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".

