Geek Answers Handbook

Android ignores max zoom when using fixed viewport meta tag

I have a fixed webpage width (640 pixels wide). I would like this page to shrink to the width of the mobile device. However, if the native width of the device is more than 640 pixels, I don’t want it to stretch. Seems simple enough:

<meta name="viewport" content="width=640, maximum-scale=1.0" />

This works as expected on an iPad / iPhone. However, on an Android tablet (for example, in landscape mode), the content becomes scaled to fit the display. In other words, Android simply ignores max-scale = 1. You can see the example page with the problem here . For completeness, here is the source:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test Viewport</title> <meta name="viewport" content="width=640, maximum-scale=1.0" /> <style> div.bar { position: absolute; width: 636px; height: 50px; background-color: yellow; border: 2px solid black; left: 50%; margin-left: -320px; } </style> </head> <body> <div class="bar"> </div> </body> </html>

I experimented a lot and experimented with viewport meta tags. I read almost everything on this topic, but did not see this seemingly basic problem.

Two notes:

  • This is not a problem with a given dpi density

  • Setting the width of the viewport to the width of the device is not useful in this case, since the width of the content is fixed and greater than (for example) the width of the phone’s portfolio. If I set width = device width, the page will not be automatically reduced to fit the phone.

Many thanks.

+7
source share
2 answers

After I hit my head on the table, I found a solution:

Unfortunately, it seems that iOS and Android just behave differently (Android clearly does not do what the spec says, ignoring the maximum scale). The solution is to specialize in permission based using JavaScript:

  • If the screen width (see note below) is greater than or equal to the width of the fixed page (640 in my example), set the width of the content of the viewport meta tag to the screen width

  • Else set the width of the contents of the viewport meta tag to a fixed page width (640)

Presto. Lame that it requires specialization of JavaScript, but such is life.

Please note that the Javascript screen.width on the iPad / iPhone is incorrect if the device is landscape (iPad still reports portrait width instead of landscape width, unlike Android, This is the case!). Therefore, you will need to check window.orientation on the iPad / iPhone and use screen.height instead of screen.width if you are in a landscape.

+10
source

I would rather use

 width=640, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi

Instead of the Max scale property ... The target-densityDpi si Android property is specific, maybe it can fix your problem.

0
source

More articles:


All Articles