5

Safari を使用する iPad では、次のページに移動します: http://ifelse.org/projects/errors/viewport/test.html

これはソースです：

<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>

viewportポートレート モードで 1030 ピクセルの が完全に表示されるこの画像のようになります。

  1. ブックマーク アイコン(+)をタップします。
  2. ホーム画面に追加をタップ
  3. ブックマークが作成されます。ブックマークを開くと、Web ページがフルスクリーンの webapp モードで開きます。

viewportタグは基本的に無視されます。私は、さまざまなピクセル値を使用したデバイスと混合ピクセル値を訴えるさまざまなバリエーションを試しました。何もない。

それで...これはバグですか、それとも機能ですか？

これがAppleの意図的なものである場合、それは本質的に、実際の幅が768pxである必要がある見栄えの良いWebアプリを適切に開発することを意味します...？

4

1 に答える 1

4

バグでも機能でもないと思います。しかし、それは本当に迷惑です。

iOS4 の時点で、モバイル サファリviewportは Web アプリ モードでメタタグを完全に無視します。通常のモバイル サファリ モードでは、明示的なコンテンツの幅がデバイスの幅にマッピングされるようにするために必要な倍率が自動計算されます。Web アプリ モードではこれを行わず、常に scale=1.0 を使用します。そのため、リキッド レイアウトに切り替えてタグに設定width=device-widthする必要があります(これは理想的ではありません)。viewportまたは、UIWebView を使用してアプリを構築し、通常の動作を復元する必要があります。

これは、Webアプリの機能、IMHOを大幅に壊します。

于 2011-01-03T22:37:23.230 に答える