如何在 Safari 移动设备上禁用双击缩放?

问题描述 投票:0回答:1

如何在 Safari 移动设备上禁用双击缩放?

默认行为有一些规则:对于文本,它在某种程度上取决于字体大小。其他类型的元素也允许双击,然后通常执行缩放(例如 img)。

但是整个双击缩放应该被禁用。

这些是常见的方法:

  • touch-action: manipulation
    应用于
    *
    ;根本不起作用。
  • touch-action: none
    应用于
    *
    ;似乎禁用了从放大位置缩小回来的功能……
  • <meta name="viewport" ...>
    ;浏览器会忽略它。
  • 然后,有一些 JavaScript/jQuery 解决方案,但似乎没有一个能够工作或可靠地工作。

这是一个双击缩放(即使是小文本)的示例:https://www.amazon.de/dp/B0D5MF64XM

这里是一个双击时进行缩放的示例:https://dr-adler.com

(对 URL 感到抱歉;此处嵌入交互式代码示例并不能可靠地演示问题……)

html css responsive-design frontend user-experience
1个回答
1
投票
Safari Mobile 缺乏一种简单的方法来普遍禁用双击缩放。视口元标记中的 touch-action:manipulation 或 user-scalable=no 等典型方法通常无法在 Safari Mobile 上可靠地工作。这是防止双击缩放的 JavaScript 解决方法:

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 毫秒内的连续点击视为无效来停止双击缩放。如有必要,调整时间。此解决方案不会禁用捏合缩放功能,从而保留了可访问性。

© www.soinside.com 2019 - 2024. All rights reserved.