Geek Answers Handbook

Is the displayed META tag broken in Mobile Safari in webapp mode?

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 viewportof 1030 pixels is fully displayed in portrait mode:

  • Click the bookmark icon (+)
  • Click "Add to Home Screen"
  • Bookmark created. Open the bookmark and the web page will open in webapp mode in full screen mode.

The tag viewportis essentially ignored. I tried several options for suing device-with and mixed pixel values. Nothing.

So ... is this a bug or a function?

Apple, , , -, , 768 ...?

+5
1

, , . .

iOS4, viewport -. , , . - scale = 1.0. , width=device-width viewport ( ). UIWebView .

-, IMHO.

+4

More articles:


All Articles