Is viewport META tag broken in Mobile Safari when 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 the viewport of 1030 pixels is fully visible in Portrait mode:

Tap Bookmarks Icon (+)
Tap Add to Home Screen
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 ... ?

ansaurus

tags:

views:

answers:

Is viewport META tag broken in Mobile Safari when in webapp mode?

related questions