Safari双击变焦背后的秘密是什么?

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

这是一个常见问题……但答案似乎不再有效……Safari Mobile 如何决定哪些元素允许双击缩放?

我想禁用每个元素的双击缩放功能。

  • touch-action: manipulation
    应用于
    *
    根本不起作用。
  • touch-action: none
    应用于
    *
    将禁用从放大位置缩小……
  • <meta name="viewport" ...>
    也没有解决这个问题

尝试一下...例如在 stackoverflow mobile 上 - 无需双击缩放。无论文字多小/多窄......

然后参见 e。 g。 https://dr-adler.com进行比较…(抱歉,嵌入此处并不能说明问题)

html css responsive-design frontend user-experience
1个回答
0
投票

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.