Geek Answers Handbook

Android tablet seems to ignore meta view

I have a website that I try to sit perfectly on all devices.

I use media queries to specify a different device-based layout. However, I have a problem viewing.

My view tag:

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

It works great for an iPad, but on an Android tablet, it seems to ignore the meta viewport tag.

(sorry, crappy photos, iPhone camera! Using a tablet for colleagues and didn’t want to get into his email to send screenshots to himself)

Here's how it loads - note how it doesn't show the zoom level correctly. It is enlarged too far, and part of the page is to the right of the screen: enter image description here

when I zoom in (as far as possible) it looks like this. This is how I want it to appear on first boot before the user is scaled:

enter image description here

When I rotate the device, it does not change the width of the screen at all, so it is displayed with the same zoom level, but with white space on both sides.

Does anyone have any ideas how I can make him behave so that I can go on a weekend and drink alcohol?

+4
source share
4 answers

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

Try placing this javascript in your title 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>
+4
source

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>
+1
source

Have you tried adding initial-scale=1.0 to your content? This should work, but if it is not, I can try adding some more properties there. Here you can find out about all the different viewports .

0
source

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

-1
source

More articles:


All Articles