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

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

<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-scaleable = X" не работает

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

UPDATE

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

user-scalable=0

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

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

Ответ 6

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

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

дополнительно

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

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

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

Ответ 7

Это отлично работает в IOS 10.3.2

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

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

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

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

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

Ответ 11

Я получил это работает в iOS 12 со следующим кодом:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

С первым оператором if я гарантирую, что он будет выполняться только в средах iOS (если он выполняется в Android, прокрутка будет нарушена). Также обратите внимание, что для опции passive установлено значение false.

Ответ 12

У меня по глупости был div-обертка, ширина которой измерялась в пикселях. Другие браузеры казались достаточно умными, чтобы справиться с этим. После того, как я преобразовал ширину в процентное значение, она отлично работала и на мобильном телефоне Safari. Очень надоедливый.

.page{width: 960px;}

в

.page{width:93.75%}

<div id="divPage" class="page">
</div>

Ответ 13

Проверьте это руководство, которое SeoOnDay устранил вышеупомянутую проблему: https://youtu.be / -oXkk45H6e8

Ответ 14

Чтобы соответствовать требованиям доступности WAI WCAG 2.0 AA, вы должны никогда не отключать масштабирование. (WCAG 2.0: SC 1.4.4 Изменение размера текста Уровень AA). Подробнее об этом можно узнать здесь: Доступность мобильных устройств: как применяются WCAG 2.0 и другие рекомендации W3C/WAI к Mobile, 2.2 Zoom/Magnification

Ответ 15

Этот должен работать на iphone и т.д.

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