Мета-тег viewport не работает в Mobile Safari в режиме веб-приложения? - PullRequest
5 голосов
/ 12 октября 2010

На iPad с помощью Safari перейдите на эту страницу: 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. Закладка создана.Откройте закладку, и веб-страница откроется в режиме веб-приложения с полноэкранным режимом.

Тег viewport по существу игнорируется.Я пробовал несколько вариантов подать в суд на устройство со смешанными значениями пикселей.Ничего.

Итак ... это ошибка или особенность?

Если это намеренно со стороны Apple, это, по сути, означает правильную разработку нужных веб-приложений, которые вам нужны.перейти с фактической шириной 768 пикселей ...?

1 Ответ

4 голосов
/ 04 января 2011

Это не ошибка или особенность, я не думаю. Но это действительно раздражает.

Начиная с iOS4, мобильное сафари полностью игнорирует метатег viewport в режиме веб-приложения. В обычном режиме мобильного сафари он будет автоматически рассчитывать масштабный коэффициент, необходимый для того, чтобы убедиться, что явная ширина контента соответствует ширине устройства. В режиме веб-приложения он больше не делает этого и всегда использует scale = 1.0. Таким образом, вы либо должны перейти на жидкостную раскладку и установить width=device-width в своем теге viewport (что не идеально). Или вам нужно создать приложение, используя UIWebView, чтобы восстановить нормальное поведение.

Это существенно нарушает функциональность веб-приложения, ИМХО.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...