six demon bag

Wind, fire, all that kind of thing!

2015-01-18

HTML Width in Android Browsers

I finally got around to adding a style for mobile devices to this thing. Since I already do all the formatting via CSS, applying responsive design boiled down to adding a media query for devices with a given minimum screen width, and fine-tuning several values in the stylesheets. While doing that I ran into a weird problem, though.


I started with a simple media query for a minimum width of 910 px:

@media screen and (min-width: 910px) {
  ...
}

and moved all the styles pertaining to the "desktop" layout to the body of that query. The default styles were modified to make the pages readable on mobile devices. However, when I first viewed the page in the Android VM I set up for testing, the browser still showed the regular desktop layout:

page looking as usual, only smaller

Changing the media query from min-width to min-screen-width sort of fixed that, although the text remained terribly small:

Page showing the mobile layout, but still very small text.

The font size was easy to change, but a much bigger problem (pun not intended) was that paragraphs were wrapped at roughly half the screen width regardless of font size or paragraph width:

Text size OK, but lines wrapped at half the screen width.

Some quick googling revealed this answer on StackOverflow, which turned out to be the solution to the problem. So I added

<meta name="viewport" content="width=device-width" />

to the page headers, reverted the changes to font size and media query, et voilà:

Behold the new layout!

Posted 16:59 [permalink]