Is viewport META tag broken in Mobile Safari when in webapp mode?_问答_开发者

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

开发者 https://www.devze.com 2023-01-19 13:19 出处：网络

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

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-mobil开发者_运维问答e-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 ... ?

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.