Thursday, 12 September 2013

How do I prevent "dekstop" css from downloading in Android Chrome on Nexus 4?

How do I prevent "dekstop" css from downloading in Android Chrome on Nexus 4?

I'm writing a mobile-first website with progressive enhancement, so I've
setup a base.css file that handles layout for small/mobile screens (704px
or less) and a full.css file that handles layout for desktop/tablet
screens.
This is how I link the files
<link rel="stylesheet" href="css/base.css?v=1.67" media="screen, handheld">
<link rel="stylesheet" href="css/full.css?v=1.7" media="screen and
(min-width:44em)">
(The 44em is 704px based on "base" font size of 16px, however as part of
my debugging this problem I have used absolute pixel values instead, and
quiet large ones at that, to no avail. Speaking of the problem...)
The problem I get is that my nexus 4 device downloads the full.css file.
It is shown in the chrome inspector I setup using USB debugging and
confirmed using wireshark. Tt even outputs a couple of warnings to the
console, so full.css is definitely being processed.
Like mentioned above I even tried using large pixel values (1980px) but
the phone still downloads the file. The really strange part is that the
layout doesn't look like full.css is being used. In fact if I remove the
media query so it loads "properly" it screws up the layout, as it should.
So basically the site behaves correctly but the bandwidth is still being
used to download full.css, which is not ideal since I want to optimize the
site as much as possible.
Is this a known issue with chrome for android? Is there any solutions
(short of doing browser/resolution detection on the server)?

No comments:

Post a Comment