Как отключить масштабирование видового экрана в 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-scalable = X ' не работает

Я также попытался разделить запятые значения вместо точки с запятой, не повезло. Тогда я попробовал ТОЛЬКО иметь user-scalableнастоящее значение, но все же не повезло.

ОБНОВИТЬ

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

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

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

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

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

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

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

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

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

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

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

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

для iPhone Safari до iOS 10 «окно просмотра» не является решением, мне не нравится этот способ, но я использовал этот код JavaScript, и это помогло мне

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

user-scalable=0

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

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

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

<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, добавьте следующий текст для браузеров на основе webkit:

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

Я получил это работает в 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.

Это прекрасно работает в IOS 10.3.2

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

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

Мне удалось остановить это поведение, добавив следующее в заголовок 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;
}

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

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

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

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

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

.page{width: 960px;}

в

.page{width:93.75%}

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

Использование touch-actionсвойства CSS является наиболее элегантным решением. Протестировано на iOS 13.5.

Чтобы отключить жесты масштабирования и дважды нажмите, чтобы увеличить:

body {
  touch-action: pan-x pan-y;
}

Если ваше приложение также не нуждается в панорамировании , т.е. прокрутке, используйте это:

body {
  touch-action: none;
}

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

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

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