Presumo que tenho uma <div>
área de contêiner de entrada com texto, controles deslizantes e botões e desejo inibir toques duplos acidentais nela <div>
. O seguinte não inibe o zoom na área de entrada e não se relaciona ao toque duplo e zoom fora da minha <div>
área. Existem variações dependendo do aplicativo do navegador.
Eu apenas tentei.
(1) Para Safari no iOS e Chrome no Android, e é o método preferido. Funciona exceto para aplicativo de Internet na Samsung, onde desativa os toques duplos não totalmente <div>
, mas pelo menos em elementos que controlam os toques. Ele retorna return false
, com exceção de text
e range
entradas.
$('selector of <div> input area').on('touchend',disabledoubletap);
function disabledoubletap(ev) {
var preventok=$(ev.target).is('input[type=text],input[type=range]');
if(preventok==false) return false;
}
(2) Opcionalmente para aplicativo de Internet integrado no Android (5.1, Samsung), inibe toques duplos no <div>
, mas inibe o zoom em <div>
:
$('selector of <div> input area').on('touchstart touchend',disabledoubletap);
(3) Para o Chrome no Android 5.1, desativa o toque duplo, não inibe o zoom e não faz nada sobre o toque duplo nos outros navegadores. O duplo toque inibidor do <meta name="viewport" ...>
é irritante, pois <meta name="viewport" ...>
parece uma boa prática.
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=5, user-scalable=yes">