Android tablet seemingly ignoring meta viewport

4
votes

I have a site which I am trying to get to sit perfectly in all devices.

I'm using media queries to specify a different layout based on the device. I have an issue with the viewport however.

My viewport tag is:

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

It sits perfectly on the iPad but on the android tablet, it seemingly ignores the meta viewport tag.

(excuse the crappy photos. iPhone camera! Using colleagues' tablet and didn't want to get into his email to send myself screen grabs)

Here is how it loads - notice how it doesn't show the zoom level correctly. It is zoomed in too far and some of the page is off the right of the screen: enter image description here

when I pinch zoom out (as far as it will allow) it appears like this - This is how I want it to appear on first load before the user zooms out:

enter image description here

When I rotate the device, it doesn't change the display width at all so it appears at the same zoom level but with white space on either side.

Does anyone have any ideas how I can get it to behave so I can go for the weekend and consume alcohol?

4
htmlcssviewportmeta
You've tried adding target-densitydpi=device-dpi to the list as well? I doubt your tablet understands the @viewport CSS rule, but it's worth trying out: dev.opera.com/articles/view/… - cimmanon
also check this out: stackoverflow.com/q/10466810/104380 - vsync

4 Answers

4
votes

Your page is being cropped because the size of your browser css pixel is larger than the size of your devices physical pixel.

Try placing this JavaScript in your header as a fix for your problem.

<script type="text/javascript">

    var scale = 1 / window.devicePixelRatio;

    var viewportTag = "<meta id=\"meta1\" name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=" + scale + ", maximum-scale=1, user-scalable=no\"/>";        

    document.write(viewportTag);        

</script>
1
votes

Different versions of Android handle the viewport differently.

What version of Android are you using?

Here is my lame javascript hack to fix it:

<head>
  <!-- other stuff in the head tag goes here -->
  <script type="text/javascript">
    function viewport_to_device_width() {
      // omit viewport meta tag (to force setting initial scale to full extent) by returning false
      var b = true;
      if (window.navigator.userAgent.match(/android 2.2/i) || window.navigator.userAgent.match(/android 2.3/i) || window.navigator.userAgent.match(/android 4.0/i)) {
        b = false;
      } else if (window.navigator.userAgent.match(/android/i) && window.navigator.userAgent.match(/Linux armv7l/i) && window.navigator.userAgent.match(/fennec/i)) {
        b = false;
      }
      return b;
    }
    if (viewport_to_device_width()) {
      // omit viewport meta tag for Android 2.2 and Android 4.0 to force setting initial scale to full extent
      document.write('<meta name="viewport" content="width=device-width">');
    }
  </script>
  <noscript>
    <meta name="viewport" content="width=device-width">
  </noscript>
</head>
0
votes

Have you tried adding initial-scale=1.0 to your content? That should work, but if it doesn't, I might try throwing some more properties in there. You can read more about all the different viewport properties here.

-1
votes

Different browsers are working differently. The only browser that I can make work properly on the Nexus 7 is Dolphin, which has other problems with HTML5 buttons etc.