Как отключить масштабирование видового экрана в Mobile Safari?

Question

Я пробовал все три из них безрезультатно:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” />

каждый - это разные значения, которые я нашел рекомендованными поиском в Google или поиском SO, но ни одно из значений 'user-scalable = X', похоже, не работает

Я также попытался разделить запятую вместо значения точки с запятой, не повезло. Затем я попытался использовать ТОЛЬКО пользовательское масштабируемое значение, но безуспешно.

UPDATE

Получил это с сайта Apple, и он работает:

<meta name="viewport" content="width=device-width, user-scalable=no" />

оказывается, что проблема заключалась в нестандартных кавычках, потому что я скопировал метатег с сайта, который их использовал, упс

Answer 1

Ваш код отображает двойные кавычки атрибута в виде причудливых двойных кавычек.Если в вашем исходном коде присутствуют причудливые кавычки, я думаю, в этом проблема.

Это работает для меня в Mobile Safari в iOS 4.2.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Answer 2

Для людей, ищущих решение для iOS 10, user-scaleable=no отключено в Safari для iOS 10. Причина в том, что Apple пытается улучшить доступность, позволяя людям увеличивать веб-страницы.

Из заметок о выпуске :

Чтобы улучшить доступность веб-сайтов в Safari, пользователи теперь могут увеличивать масштаб, даже если веб-сайт устанавливает масштабируемость пользователя = нет в области просмотра.

Итак, насколько я понимаю, нам просто не повезло.

Answer 3

@ mattis верно, что iOS 10 Safari не позволит вам отключить масштабирование с помощью масштабируемого пользователем атрибута. Тем не менее, я получил его, чтобы отключить использование protectDefault для события'eststart '. Я проверял это только в Safari в iOS 10.0.2.

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

Answer 4

для iphone safari до iOS 10 "viewport" - это не решение, мне не нравится этот способ, но я использовал этот код JavaScript, и он мне помог

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);

Answer 5

user-scalable=0

Это больше не работает на iOS 10. Apple удалила эту функцию.

Нет способа отключить масштабирование веб-сайта на iOS, если только вы не создадите приложение для большой платформы.

Answer 6

Попробуйте добавить следующее в заголовок:

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

* дополнительно +1004 *

<meta name="HandheldFriendly" content="true">

Наконец, либо в качестве атрибута стиля, либо в файле CSS, добавьте следующий текст для браузеров на основе webkit:

html {
    -webkit-text-size-adjust: none
}

Answer 7

Это нормально работает в IOS 10.3.2

    document.addEventListener('touchmove', function(event) {
        event = event.originalEvent || event;
        if (event.scale !== 1) {
           event.preventDefault();
        }
    }, false);

спасибо @arthur и @ aleclarson

Answer 8

В Safari 9.0 и выше вы можете использовать сжимать, чтобы подогнать в метатеге области просмотра, как показано ниже

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Answer 9

иногда эти другие директивы в контенте могут испортить ваш взгляд из-за лучшего предположения Apple о том, как сделать макет вашей страницы, все, что вам нужно, чтобы отключить масштабирование, это

<meta name="viewport" content="user-scalable=no" />

Answer 10

Мне удалось остановить это поведение, добавив следующее в заголовок HTML.Это работает на мобильных устройствах, так как настольные браузеры поддерживают масштабирование при использовании колесика мыши.Это не имеет большого значения для настольных браузеров, но важно принять это во внимание.

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

и следующее правило для таблицы стилей CSS

html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}