Обратите внимание, что большинство из этих опций нарушают многие функциональные возможности и ухудшают доступность и т. Д. И т. Д., Но некоторые приложения, в частности PWA с поддержкой Multi-Touch, должны отключать эти функции. Используйте на свой страх и риск.
Что касается родительского комментария о том, что они перепробовали все решения в ссылке, обратите внимание на «Обратите внимание, что если какие-либо более глубокие цели вызывают stopPropagation для события, событие не достигнет документа и слушатель не сможет предотвратить масштабирование. "- это ключ.
Добавление этого тега скрипта работает на iOS 11.3 Safari (протестировано на iPhone SE)
<script>
document.addEventListener('touchmove',
function(e) {
e.preventDefault();
}, {passive:false});
</script>
Конечно, вам придется обрабатывать все сенсорные вводы (что, если вам нужен пользовательский PWA с несколькими касаниями, вам все равно придется делать).
Одно предостережение в том, что прокрутка отключена таким образом (может быть, есть обходной путь?), Но когда вам нужен PWA с одним экраном, это плюс.
Еще одна оговорка заключается в том, что для PWA-подобного поведения сам контент должен быть не более
height:100%
Таким образом, верхняя и нижняя панели в Safari (URL и нижняя навигация) не обрезают контент (по крайней мере, в портретной ориентации).
Последнее предостережение заключается в том, что двойное касание для увеличения все еще функционирует в этом режиме. Лучший способ отключить это - установить следующее для корневого узла
touch-action:manipulation;
Однако это работает только тогда, когда корневой узел кликабелен, поэтому добавьте пустой элемент onclick к элементу.
И, наконец, поскольку узел теперь можно нажимать, он может иметь полупрозрачное наложение для ненужных кнопок, которое можно скрыть с помощью
-webkit-tap-highlight-color: rgba(0,0,0,0);