applicazioni mobili: evitare l’apertura del dialer al tocco su un numero di telefono

Grazie all’ausilio di Apache Cordova lo sviluppo di applicazioni mobili è stato significativamente semplificato. Si ha la possibilità con una manciata di JavaScript, HTML5 e CSS3 di sviluppare applicazioni di una certa complessità senza troppe difficoltà. Buona parte del processo, delle modalità e delle tecniche di sviluppo sono descritte nel mio ultimo libro Sviluppare applicazioni ibride per dispositivi mobili. In esso sono riportati anche alcuni aspetti di ottimizzazione delle applicazioni ma tra alcuni degli argomenti non trattati rientra il blocco del comportamento di base della webView: evitare che il tocco su un numero di telefono faccia partire il dialer.

Spulciando tra la documentazione di Apache Cordova l’unica informazione che viene fornita è di utilizzare un meta tag:

<meta name="format-detection" content="telephone=no">

Questa soluzione è valida quando si utilizza Apache Cordova in modalità classica, ma spesso si ricorre all’utilizzo di Crosswalk, un plugin per utilizzare una specifica versione di WebKit come WebView dell’applicazione. In tal caso, questo meta non è più sufficiente, in quanto sembra essere ignorato (o non supportato).

Per risolvere il problema è sufficiente applicare al corpo della pagina web (body) oppure allo specifico elemento una semplice regola di stile:

body{
   -webkit-user-select: none;
    user-select: none;
}

Secondo il sito caniuse.com la regola user-select è utilizzabile su tutti i browser moderni ad eccezione di OperaMini.

Da evidenziare che usando questa regola sull’elemento body potrebbero verificarsi alcuni comportamenti anomali quali, per esempio l’impossibilità di dare il focus ad alcuni elementi di input, pertanto ne è consigliato l’uso con regole più specifiche.

Questa ottimizzazione, per quanto insignificante, potrà migliorare in modo sostanziale l’esperienza utente nelle applicazioni ibride.