Home/ Questions/Q 3663680
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T01:33:29+00:00

On an iPad using Safari, go to this page: http://ifelse.org/projects/errors/viewport/test.html This is the Source:

  • 0

On an iPad using Safari, go to this page:
http://ifelse.org/projects/errors/viewport/test.html

This is the Source:

<html>
    <head>
        <title>Viewport Test</title>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=1030" />
        <style>
            body {
                padding: 0;
                margin: 0;
            }
            #test {
                width:  1024px;
                height: 500px;
                border: 3px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div id="test">
            <p>This is 1024 with a 3px border, so device width is 1030.</p>
            <p>Works when viewing in Mobile Safari.</p>
            <p>Does not work if you Bookmark it to the Home Screen and open from there.</p>
            <p>Compare <a href="viewport_1030_safari.png">MobileSafari</a> view to <a href="viewport_1030_webapp.png">Webapp</a> view.</p>
        </div>
    </body>
</html>

It should look like this image where the viewport of 1030 pixels is fully visible in Portrait mode:

  1. Tap Bookmarks Icon (+)
  2. Tap Add to Home Screen
  3. A bookmark is created. Open the bookmark and web page will open in webapp mode with fullscreen.

The viewport tag is essentially ignored. I’ve tried a number of variation suing device-with and mixed pixel values. Nothing.

So… is this a bug, or a feature?

If this is intentional on the part of Apple, it essentially it means to properly develop nice looking web apps you need to go with an actual width of 768px … ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Its neither a bug or a feature, I don’t think. But it is really annoying.

    As of iOS4, mobile safari completely ignores the viewport meta-tag in web-app mode. In regular mobile safari mode, it will auto-calculate the scale factor needed to make sure the explicit content width is mapped to the device-width. In web-app mode it no longer does this, and always uses scale=1.0. So you either have to switch to a liquid layout and set width=device-width in your viewport tag (which isn’t ideal). Or you have to build an app using UIWebView to restore the normal behavior.

    It significantly breaks the web-app functionality, IMHO.

    • 0