Метаданные Viewport не работают в iPhone и Android

Я использую следующий html-код

<!DOCTYPE HTML>
  <html>
    <head>
     <title>test</title>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    </head>
    <body>
    test
    </body>
  </html>

Мое намерение состоит в том, чтобы запретить пользователю увеличивать или уменьшать масштаб. Вышеприведенный код не работает в iPhone и Android. Любое решение?

РЕДАКТИРОВАТЬ: Он отображается в настройках iPhone, если Zoom выбран как On в разделе Settings>Accessibility>Zoom, тогда это переопределит метатег. Источник

Не уверен, почему это происходит в android.

Ответы

Ответ 1

Я использую этот тег для предотвращения масштабирования всех мобильных платформ:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />

С ; и не ,

Ответ 2

В свою очередь, у меня есть этот "просмотр", который хорошо работает на Android (Nexus 5) и на iPhone.

<meta name="viewport" content="width=device-width; initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5; " />

Я надеюсь, что это поможет вам!

Ответ 3

установите этот script, чтобы избежать масштабирования. в последней версии сафари, если метатег не работает

document.documentElement.addEventListener('touchstart', function (event) {
            if (event.touches.length > 1) {
                event.preventDefault();
            }
        }, false);

Ответ 4

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; height=device-height" />

хорошо работал на Samsung Galaxy S3

Ответ 5

Некоторое время вам нужно добавить -webkit-flex: 1 в контейнеры (если используется flexbox). Это помогло мне с моей проблемой просмотра.