Я обновил свой iPhone 6 plus до бета-версии iOS 10 и обнаружил, что в мобильном сафари вы можете увеличивать любые веб-страницы, дважды нажав или защелкните IGNORE код user-scalable = no
в метатеге. Я не знаю, ошибка это или особенность. Если это рассматривается как функция, как мы можем отключить масштабирование порта просмотра iOS 10 safari ?
обновленные в версии iOS 11/12, сафари iOS 11 и iOS 12 по-прежнему относятся к метатегу `* NOT **.
Можно предотвратить масштабирование веб-страниц в сафари на iOS 10, но это потребует дополнительной работы с вашей стороны. Я предполагаю, что аргумент заключается в том, что степень сложности должна помешать разработчикам культа груза сбрасывать «не масштабируемый пользователем = нет» в каждый тег видового окна и усложнять задачу для пользователей с нарушениями зрения.
Тем не менее, я хотел бы, чтобы Apple изменила свою реализацию, чтобы был простой (мета-тег) способ отключить двойной кран-зум. Большинство трудностей связано с этим взаимодействием.
Вы можете остановить pepp-to-zoom с чем-то вроде этого:
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, false);
Обратите внимание, что если какие-либо более глубокие цели вызывают stopPropagation на событии, событие не достигнет документа, и этот слушатель не будет препятствовать поведению масштабирования.
Отключение двойного постукивания к зуму аналогично. Вы отключаете любое нажатие на документ, происходящее в течение 300 миллисекунд от предыдущего нажатия:
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
Если вы не настроите правильные элементы формы, фокусировка на входе будет автоматически масштабироваться, и, поскольку вы в основном отключили ручное масштабирование, теперь будет практически невозможно отуменьшить масштаб. Убедитесь, что размер входного шрифта > = 16px.
Если вы пытаетесь решить эту проблему в WKWebView в собственном приложении, приведенное выше решение является жизнеспособным, но это лучшее решение: https://stackoverflow.com/a/31943976/661418. И, как упоминалось в других ответах, в iOS 10 beta 6 Apple теперь предоставила флаг в честь метатега.
Обновление, май 2017 года: Я заменил старый метод «проверьте длину касаний на touchstart», чтобы отключить масштабирование с помощью более простого подхода «проверьте event.scale на touchmove». Должно быть более надежным для всех.
Это новая функция в iOS 10.
- Чтобы улучшить доступность веб-сайтов в Safari, пользователи теперь могут масштабировать, даже если веб-сайт устанавливает «user-scalable = no» в окне просмотра.
Я ожидаю, что мы скоро увидим надстройку JS, чтобы каким-то образом отключить ее.
Я смог исправить это, используя свойство css touch-action
для отдельных элементов. Попробуйте установить touch-action: манипулирование;
на элементах, на которые обычно нажимаются, например, ссылки или кнопки.
Похоже, что это поведение предположительно изменилось в последней бета-версии, которая на момент написания статьи была бета-6.
Из заметок к выпуску для iOS 10 Beta 6:
WKWebView
теперь по умолчанию соответствуетuser-scalable = no
из области просмотра. КлиентыWKWebView
могут улучшить доступность и позволить пользователям pepp-to-zoom на всех страницах, установивWKWebViewConfiguration
свойствоignoresViewportScaleLimits
доYES
.
Однако в моем (очень ограниченном) тестировании я пока не могу подтвердить, что это так.
Редактировать: проверено, iOS 10 Beta 6 по умолчанию уважает user-scalable = no
.
Обходной путь, который работает в Mobile Safari в это время написания, состоит в том, чтобы иметь третий аргумент в addEventListener
be {passive: false}
, поэтому полный обходной путь выглядит следующим образом:
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
Вы можете захотеть проверить, поддерживаются ли параметры, чтобы оставаться обратно совместимым.
Я провел около часа в поисках более надежного варианта JavaScript и не нашел его. Так получилось, что в последние несколько дней я возился с hammer.js (Hammer.js - это библиотека, которая позволяет легко манипулировать всевозможными сенсорными событиями) и в основном терпел неудачу в том, что я пытался делать.
С этим предостережением и пониманием я ни в коем случае не эксперт по JavaScript, это решение, которое я придумал, которое в основном использует hammer.js для захвата событий pepp-zoom и двойного нажатия, а затем регистрирует и отбрасывает их.
Убедитесь, что вы включили hammer.js на свою страницу, а затем попробуйте вставлять этот javascript в голову где-нибудь:
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
& Лт;!- язык: lang-js - > & Лт; тип сценария = "text / javascript" src = "http://hammerjs.github.io/dist/hammer.min.js" > & Лт; / script > & Лт; тип сценария = "текст / JavaScript" >
// SPORK - block pinch-zoom to force use of tooltip zoom
$(document).ready(function() {
// the element you want to attach to, probably a wrapper for the page
var myElement = document.getElementById('yourwrapperelement');
// create a new hammer object, setting "touchAction" ensures the user can still scroll/pan
var hammertime = new Hammer(myElement, {
prevent_default: false,
touchAction: "pan"
});
// pinch is not enabled by default in hammer
hammertime.get('pinch').set({
enable: true
});
// name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action
hammertime.on('pinch pinchend pinchstart doubletap', function(e) {
console.log('captured event:', e.type);
e.preventDefault();
})
});
< / script >
& Лт;!- конец фрагмента - >
Мы можем получить все, что хотим, введя одно правило стиля и перехватив события масштабирования:
$(function () {
if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return
$(document.head).append(
'<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
)
$(window).on('gesturestart touchmove', function (evt) {
if (evt.originalEvent.scale !== 1) {
evt.originalEvent.preventDefault()
document.body.style.transform = 'scale(1)'
}
})
})
Disables убирать зум.
Disables Отключает двойной шаг.
✔ Прокрутка не влияет.
✔ Отключает подсветку нажатия (которая запускается на iOS правилом стиля).
УВЕДОМЛЕНИЕ: Настройте iOS-обнаружение на свой вкус. Подробнее об этом здесь.
Извинения перед lukejackson и Петром Ковальским , ответы которого отображаются в измененном виде в коде выше.
Проверьте масштабный коэффициент в событии touchove, затем предотвратите событие касания.
document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if(event.scale > 1) {
event.preventDefault();
}
}, false);
Я попробовал предыдущий ответ о щепотке
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
однако иногда экран все еще увеличивается, когда event.touches.length > 1 Я узнал, что лучший способ - использовать событие с сенсорным движением, чтобы избежать движения пальца на экране. Код будет примерно таким:
document.documentElement.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
Надеюсь, это поможет.
Я придумал довольно наивное решение, но оно, кажется, работает. Моя цель состояла в том, чтобы предотвратить случайное двойное нажатие, которое будет интерпретироваться как увеличение, при этом сохраняя защемление, чтобы увеличить, работая для доступности.
Идея состоит в том, чтобы измерить время между первым «touchstart» и вторым «touchend» двойным нажатием, а затем интерпретировать последний «touchend» как щелчок, если задержка слишком мала. Предотвращая случайное масштабирование, этот метод, кажется, сохраняет прокрутку списка без изменений, что приятно. Не уверен, что я ничего не пропустил.
let preLastTouchStartAt = 0;
let lastTouchStartAt = 0;
const delay = 500;
document.addEventListener('touchstart', () => {
preLastTouchStartAt = lastTouchStartAt;
lastTouchStartAt = +new Date();
});
document.addEventListener('touchend', (event) => {
const touchEndAt = +new Date();
if (touchEndAt - preLastTouchStartAt < delay) {
event.preventDefault();
event.target.click();
}
});
Вдохновленный помощником из mutewinter и ответ Иосифа.
В моем конкретном случае я использую Babylon.js для создания 3D-сцены, и вся моя страница состоит из одного полноэкранного холста. 3D-движок имеет свою собственную функцию масштабирования, но на iOS это мешает. Я обновил ответ @Joseph, чтобы преодолеть мою проблему. Чтобы отключить его, я понял, что мне нужно передать {passive: false} в качестве опции слушателю событий. Следующий код работает для меня:
window.addEventListener(
"touchmove",
function(event) {
if (event.scale !== 1) {
event.preventDefault();
}
},
{ passive: false }
);
Нашел эту простую работу, которая, кажется, предотвращает двойной щелчок для увеличения:
// Convert touchend events to click events to work around an IOS 10 feature which prevents
// developers from using disabling double click touch zoom (which we don't want).
document.addEventListener('touchend', function (event) {
event.preventDefault();
$(event.target).trigger('click');
}, false);
Непреднамеренное масштабирование имеет тенденцию происходить, когда:
Чтобы предотвратить поведение double tap, я нашел два очень простых обходных пути:
<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>
Оба из них предотвращают попадание Safari (iOS 10.3.2) в кнопку zooming. Как видите, один только JavaScript, другой - только CSS. Используйте соответственно.
Вот демо: https://codepen.io/lukejacksonn/pen/QMELXQ
Я не пытался предотвратить поведение щепотки (пока), прежде всего потому, что я не склонен создавать мульти-контактные интерфейсы для Интернета, и, во-вторых, я пришел к выводу, что, возможно, все интерфейсы, включая пользовательский интерфейс собственного приложения, должны быть «защемлены для увеличения» -может местами. Я все еще хотел бы, чтобы пользователь не делал этого, чтобы сделать ваш пользовательский интерфейс доступным для них любой ценой.
Как бы странно это ни звучало, по крайней мере, для Safari в iOS 10.2, двойное нажатие для увеличения магически отключается, если ваш элемент или любой из его предков имеет одно из следующего:
Cursor: pointer
установлен в CSSэто сработало для меня
document.documentElement.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
Я проверил все вышеперечисленные ответы на практике на своей странице в iOS (iPhone 6, iOS 10.0.2), но безуспешно. Это мое рабочее решение:
$(window).bind('gesturestart touchmove', function(event) {
event = event.originalEvent || event;
if (event.scale !== 1) {
event.preventDefault();
document.body.style.transform = 'scale(1)'
}
});