iOS 11.4 Safari 不尊重“触摸动作：操作”

Question

我在尝试构建跨平台的 React Web 应用程序时遇到了问题。基本上，我只是希望能够div通过在桌面上双击和在移动设备上双击来与 a进行交互。

但是，在 iOS 上（我专门针对 Safari 的最新 11.4 版本），双击始终会导致“双击缩放”行为。

从我的研究中，我发现touch-action: manipulation在我的 css中使用应该可以解决这个问题，甚至应该被 iOS 上的 Safari 支持（https://caniuse.com/#feat=css-touch-action）。

然而，我做了一个超级简单的react项目，不管怎样，双击蓝色div总是缩放。

我希望我只是错过了一些东西，所以如果有人能启发我，将不胜感激！

这是我在 GitHub 中托管的超级简单的 React 项目：https : //github.com/erlloyd/touch-action-bug，这是相关代码：

应用组件

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
      </div>
    );
  }
}

export default App;

应用程序.css

.App {
  width: 100px;
  height: 100px;
  margin-left: 10px;
  margin-top: 10px;
  background: blue;
  touch-action: manipulation;
}

相关meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Answer 1

关于原始WebKit 功能请求的最后几条评论可能对您有用。

...在该示例中发生的情况是，由于 touch-action: 操作 div 不可点击，因此我们在尝试为触摸查找可点击元素时跳过该节点。要验证这一点，请使用触摸动作操作向 div 添加一个 onclick 并且触摸它应该会快速转动。

此页面显示，当对象可点击时，该属性似乎确实适用，并且在测试中，我可以看到双击缩放行为不会发生在“操作”框上。

将 onClick 添加到您的 div 应该可以解决问题，例如：

class App extends Component {
  render() {
    return (
      <div className="App" onClick={e => e.preventDefault()}>
      </div>
    );
  }
}

Answer 2

根据MDN，Safari 和 Mobile Safari 不支持touch-action:manipulation