Android viewport not working issues

Some fun facts about the Android 4 viewport I learned the hard way.

  • If you use a viewport width of 320, the width is ignored! You have to use 321. You don’t believe it? Try it.
  • If you define a viewport that is bigger than the “natural” viewport of the device and have user-scaling disabled, the viewport is ignored
  • If you want to read the viewport width of the device using javascript, the viewport width has to be set do “device-width”

The way I am doing it because of the fun facts:

  • Set the viewport-width to “device-width”
  • Read the device-width with js window.screen.width
  • If the device-width is bigger than 320 but smaller than your tablet size, set the viewport tag content to a width of 321 with javascript
  • Otherwise set the viewport width to your tablet size and add a class to your HTML, that triggers your tablet css