Home/ Questions/Q 6893883
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T06:42:49+00:00

I have a fixed-width web page (640 pixels wide). I would like this page

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0