时间戳

首页 > 解决方案 > 如何禁用移动Safari上的所有缩放？

html - 如何禁用移动Safari上的所有缩放？

问题描述

我浏览了多个 StackOverflow 问题、多个网络教程，但没有一个有帮助。我正在开发一款网页游戏，但它根本不起作用。我没有尝试过任何 JS 解决方案，因为它们都需要 jQuery。在这一点上，我真的很沮丧，需要一个答案。

如何禁用所有缩放？不只是双击。不只是正常缩放。需要禁用所有缩放！

这是我尝试过的一些示例，但对我不起作用：

touch-action: ______;

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=___"/>

<meta name="viewport" content="width=device-width,user-scalable=___"/>

请帮忙！如果您有上述以外的其他答案，请告诉我！在这一点上我没有选择，需要一个解决方案！

标签： htmlcss

解决方案

尝试这个

body {
  touch-action: pan-x pan-y;
}

我知道的信息

  • iOS Safari 自 iOS 10 起不再尊重user-scalable=no元标记
  • touch-action: pan-y自iOS 13起受支持
  • 如果要在 iOS 10~12 之间禁用缩放，可以使用preventDefault，但效果不理想
document.addEventListener('touchstart', e => {
  if (e.touches.lenght > 1) {
    e.preventDefault()
  }
}, {
  passive: false
})

这仅在您同时用两根手指捏合时才有效，如果您先用一根手指移动然后用另一根手指捏合，则它会失败。

推荐阅读