Programming Notes

Android Browser Recognizes CSS Media Type After Page Reloading

| Comments

While trying to optimize site for mobile devices you have to add viewport meta tag:

1
2

<meta name="viewport"
  content="target-densitydpi=device-dpi, width=device-width, height=device-height, initial-scale=1.0" />

You can add additional CSS file that will be used on mobile device only. To achieve this just add CSS media type. In Android developer’s guide at http://developer.android.com/guide/webapps/targeting.html it suggests to target device DPI value like:

1
2

<link rel="stylesheet" href="css/mobile.css" type="text/css"
  media="screen and (-webkit-device-pixel-ratio:1.0)" />

It works fine, but Google Chrome on desktop PC also loads this CSS file.

There is another solution to target mobile devices (both Android, iPhone, Blackberry): to specify maximal width of the screen like:

1
2

<link rel="stylesheet" href="css/mobile.css" type="text/css"
  media="screen and (max-device-width:801px) and (max-width:801px)" />

The problem is that Android (at least 2.3 I’ve tested) recognizes this media type only after page reloading (refreshing) in browser. Googling the web I found the open issue.

I solved it using JavaScript:

1
2
3
4
5
6
7

if(isMobile){
  var cssLink = document.createElement("link");
  cssLink.setAttribute("type", "text/css");
  cssLink.setAttribute("rel", "stylesheet");
  cssLink.setAttribute("href", "css/mobile.css");
  document.head.appendChild(cssLink);
}

I tested it on my device an it works fine, unless some little delay: the CSS file loads only after JavaScript executes. When google will fix the issue (I hope so…), there will be no delay, since original link is in the HEAD section.

Of course you have to detect mobile device using the JavaScript, I used solution suggested here: http://localstreamer.posterous.com/javascript-code-snippet-how-to-detect-all-mob

Comments