Question

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

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

从我的研究中，我发现在CSS中使用touch-action: manipulation应该可以解决此问题，甚至应该由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;

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

根据MDN，Safari和Mobile Safari不支持Step _defaulFrom( {@required IconData icon, @required String nameForm, @required Key keyForm, @required String saveNumInv, @required String saveMarca, @required String saveModelo, @required String saveTipo, @required String saveDetalles, @required String saveFecha, @required TextEditingController controllerNumInv, @required TextEditingController controllerMarca, @required TextEditingController controllerModelo, @required TextEditingController controllerTipo, @required TextEditingController controllerDetalle, @required TextEditingController controllerFecha, TextEditingController controllerEncargado, String saveEncargado}) { return Step( title: Text( nameForm, style: TextStyle( color: Colors.black45, fontSize: 22.0, fontWeight: FontWeight.bold, ), ), content: Form( key: keyForm, child: Padding( padding: const EdgeInsets.all(12.0), child: Column( children: <Widget>[ Padding( padding: const EdgeInsets.only(top: 8.0), child: TextFormField( controller: controllerNumInv, autocorrect: false, decoration: _defaulImputDecoration(NUM_INVENTARIO, icon), validator: (val) => val.isEmpty ? ERROR_RELLENE_CAMPO : null, `enter code here`onSaved: (value) => saveNumInv = value, keyboardType: TextInputType.numberWithOptions(), ), ), Padding( padding: const EdgeInsets.only(top: 8.0), child: TextFormField( controller: controllerMarca, autocorrect: false, decoration: _defaulImputDecoration(MARCA, icon), validator: (val) => val.isEmpty ? ERROR_RELLENE_CAMPO : null, onSaved: (value) => saveMarca = value, ), ), Padding( padding: const EdgeInsets.only(top: 8.0), child: TextFormField( controller: controllerModelo, autocorrect: false, decoration: _defaulImputDecoration(MODELO, icon), validator: (val) => val.isEmpty ? ERROR_RELLENE_CAMPO : null, onSaved: (value) => saveModelo = value, ), ), Padding( padding: const EdgeInsets.only(top: 8.0), child: TextFormField( controller: controllerTipo, autocorrect: false, decoration: _defaulImputDecoration(TIPO, icon), validator: (val) => val.isEmpty ? ERROR_RELLENE_CAMPO : null, onSaved: (value) => saveTipo = value, ), ), Padding( padding: const EdgeInsets.only(top: 8.0), child: TextFormField( controller: controllerDetalle, autocorrect: false, decoration: _defaulImputDecoration(DETALLES, icon), validator: (val) => val.isEmpty ? ERROR_RELLENE_CAMPO : null, onSaved: (value) => saveDetalles = value, ), ), controllerEncargado != null ? Padding( padding: const EdgeInsets.only(top: 8.0), child: TextFormField( controller: controllerEncargado, autocorrect: false, decoration: _defaulImputDecoration( NOMBRE_ENCARGADO, Icons.person), validator: (val) => val.isEmpty ? ERROR_RELLENE_CAMPO : null, onSaved: (value) => saveEncargado = value, ), ) : Divider( color: Colors.transparent, ), Padding( padding: const EdgeInsets.only(top: 8.0), child: TextFormField( autocorrect: false, controller: controllerFecha, decoration: InputDecoration( suffixIcon: IconButton( icon: Icon(Icons.date_range), onPressed: () { _selectDate(context); setState(() { //_saveDate = new DateFormat.yMd(_dateTime) }); }), contentPadding: EdgeInsets.all(16.0), border: OutlineInputBorder( borderRadius: BorderRadius.circular(25.0), ), labelText: 'Fecha', labelStyle: TextStyle( color: Colors.black54, fontSize: 16.0, decorationStyle: TextDecorationStyle.wavy), ), validator: (val) => val.isEmpty ? ERROR_RELLENE_CAMPO : null, onSaved: (value) => saveFecha = value, ), ), } }) ], ), ))); }

Answer 2

对原始WebKit feature request的最后两句话可能对您有用。

...在该示例中发生的是，由于touch-action：操作div是不可单击的，因此当我们尝试找到该触摸的可单击元素时，我们将跳过该节点。要验证这一点，请通过触摸操作将onclick添加到div，并且其上的触摸应快速旋转。

This page表明该属性似乎在对象可单击时适用，并且在测试中，我看到在“操纵”框中没有出现双击缩放行为。

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

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

Answer 3

iOS Safari支持touch-action: manipulation和touch-action: auto，但我发现了一个错误，该错误不适用于输入-它们在双击时放大页面 https://caniuse.com/#search=touch-action

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

3 个答案: