Android ignores maximum-scale when using fixed-width viewport meta-tag

问题

I have a fixed-width web page (640 pixels wide). I would like this page to shrink to the width of a mobile device. However, if the device's native width is larger than 640 pixels, I do not want it stretched. Seems simple enough:

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

This works as expected in iPad/iPhone. However, on an Android tablet (ex. in landscape mode), the content gets scaled up to fit the display. In other words, Android is simply ignoring maximum-scale=1 . You can see an example page with the problem here. For the sake of 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've been doing a lot of researching and experimentation with the viewport meta-tag. I've read just about everything on the topic, but haven't seen this seemingly basic issue mentioned.

Two notes:

This is not a target-densitydpi issue
Setting the viewport width to device-width is not helpful in this case because the content width is fixed and larger than (for example) a phone's portrait device width. If I set width=device-width, the page will not automatically be scaled down to fit the phone..

Thanks much.

回答1:

After more banging my head against a table, I have found a solution:

Unfortunately it seems that iOS and Android simply behave differently (Android is very clearly not doing what the spec says by ignoring maximum-scale). The solution is to specialize based on resolution using JavaScript:

If the screen width (see note below) is greater than or equal to the fixed page width (640 in my example), then set the viewport meta-tag's content width to the screen width
Else set the viewport meta-tag's content width to fixed page width (640)

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

Note that the Javascript screen.width on iPad/iPhone is incorrect if the device is landscape mode (the iPad still reports the portrait width instead of the landscape width, unlike Android which gets it right in this case!). Therefore, you'll need to check window.orientation on iPad/iPhone and use screen.height instead of screen.width if you are in landscape.

回答2:

I'd rather use

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

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

来源：https://stackoverflow.com/questions/8316836/android-ignores-maximum-scale-when-using-fixed-width-viewport-meta-tag

标签

android

ios

html

mobile

viewport