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

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

У меня это работает в Mobile 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, пользователи теперь могут увеличивать масштаб, даже если веб-сайт устанавливает user-scaleable = no в области просмотра.

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

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

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

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

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

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

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

body {
  touch-action: none;
}

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

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

Я заставил его работать в 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.

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
}

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

На самом деле Apple отключила user-scaleable = no в последних версиях iOS. Я пробовал как руководство, и этот способ может работать:

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

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

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

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

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

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

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

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

Как уже упоминалось, это решение в основном работает с конца 2020 года:

document.addEventListener(
    'gesturestart', (e) => e.preventDefault()
);

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

body {
    overflow: hidden;
}

Но что, если вы все еще хотите, чтобы страница прокручивалась? Вы все еще можете сделать это с другим <div>, установленным как overflow:auto:

<body>
    <div id='app'></div>
</div>

а потом

body {
    overflow: hidden;
}

 #app {
     -webkit-overflow-scrolling: touch;
      height: 100vh;
      height: -webkit-fill-available;
      overflow: auto;
 }

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

.page{width: 960px;}

to

.page{width:93.75%}

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

Чтобы соответствовать требованиям доступности 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">