如何在 Safari 移动设备上禁用双击缩放?
默认行为有一些规则:对于文本,它在某种程度上取决于字体大小。其他类型的元素也允许双击,然后通常执行缩放(例如 img)。
但是整个双击缩放应该被禁用。
这些是常见的方法:
touch-action: manipulation
应用于 *
;根本不起作用。touch-action: none
应用于 *
;似乎禁用了从放大位置缩小回来的功能……<meta name="viewport" ...>
;浏览器会忽略它。这是一个不双击缩放(即使是小文本)的示例:https://www.amazon.de/dp/B0D5MF64XM
这里是一个双击时进行缩放的示例:https://dr-adler.com
(对 URL 感到抱歉;此处嵌入交互式代码示例并不能可靠地演示问题……)
let lastTouchTime = 0;
document.addEventListener('touchend', (event) => {
const currentTime = new Date().getTime();
const tapLength = currentTime - lastTouchTime;
if (tapLength < 500 && tapLength > 0) {
event.preventDefault(); // Prevents double-tap zoom
}
lastTouchTime = currentTime;
});
此脚本通过将 500 毫秒内的连续点击视为无效来停止双击缩放。如有必要,调整时间。此解决方案不会禁用捏合缩放功能,从而保留了可访问性。