Ottimizza sito Web per dispositivi touch

Question

Su un dispositivo touch come iPhone/iPad/Android può essere difficile premere un piccolo pulsante con il dito. Non esiste un modo cross-browser per rilevare i dispositivi touch con le query multimediali CSS che conosco. Quindi controllo se il browser supporta gli eventi touch javascript. Fino ad ora, altri browser non li hanno supportati, ma l'ultimo Google Chrome sul canale dev enabled touch events (anche per dispositivi non touch). E sospetto che altri produttori di browser seguiranno, dal momento che i portatili con touch screen sono in arrivo . Aggiornamento : Si è verificato un bug in Chrome, quindi ora il rilevamento JavaScript funziona di nuovo.

Questa è la prova che uso:

function isTouchDevice() { 
    return "ontouchstart" in window; 
} 

Il problema è che questo solo test se il browser ha il supporto per gli eventi di tocco, non il dispositivo.

Qualcuno sa del modo The Correct [tm] di offrire ai dispositivi touch una migliore esperienza utente? Altro che sniffare user agent.

Mozilla ha una query multimediale per dispositivi touch. Ma non ho visto nulla di simile in nessun altro browser: https://developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled

Aggiornamento: Voglio evitare di utilizzare una pagina/sito separato per dispositivi mobili/touch. La soluzione deve rilevare dispositivi touch con rilevamento di oggetti o simili da JavaScript o includere un tocco personalizzato CSS senza lo sniffing di user-agent! Il motivo principale per cui ho chiesto è stato quello di verificare che non sia possibile oggi, prima di contattare il gruppo di lavoro css3. Quindi, per favore non rispondere se non puoi seguire i requisiti nella domanda;)

Answer 1

Sembra a me come si vuole avere un'opzione di touch-screen-friendly, per coprire i seguenti scenari: dispositivi

1. iPhone-like: piccolo schermo, toccare solo
2. schermi di piccole dimensioni, non touch (non hai menzionato questo)
3. Schermi di grandi dimensioni, senza touch (cioè computer convenzionali)
4. Schermi di grandi dimensioni con touch screen come iPad, notebook/PC con touch screen.

Per i casi 1 e 2 è necessario disporre di un sito separato o di un file CSS che elimini molti contenuti non necessari e faciliti la lettura e la navigazione. Se ti interessa il caso n. 2, fintanto che i link/pulsanti sulla pagina sono navigabili da tastiera, il caso 1 e 2 sono equivalenti.

Per il caso 3 hai il tuo normale sito web. Per il caso 4 sembra che tu voglia che le cose cliccabili siano più grandi o più facili da toccare. Se non è possibile semplicemente rendere tutto più grande per tutti gli utenti, un foglio di stile alternativo può fornire le modifiche al layout touch-friendly.

La cosa più semplice da fare è fornire un collegamento alla versione touch-screen del sito da qualche parte sulla pagina.Per i dispositivi touch noti come iPad, è possibile annusare l'agente utente e impostare il foglio di stile touch come predefinito. Tuttavia, considererei l'impostazione predefinita per tutti; se il tuo design sembra buono sull'iPad, dovrebbe sembrare accettabile su qualsiasi notebook. Gli utenti del mouse con competenze di clic inferiori a quelle stellari saranno lieti di trovare target di clic più grandi, soprattutto se si aggiungono gli effetti :hover o mouseover appropriati per consentire agli utenti di sapere che le cose sono selezionabili.

So che hai detto di non voler annusare gli user-agent. Ma io sostengo che in questo momento lo stato di supporto del browser per questo è in un flusso troppo grande per preoccuparsi del modo "corretto" per farlo. I browser alla fine forniranno le informazioni di cui hai bisogno, ma probabilmente scoprirai che ci vorranno anni prima che queste informazioni siano onnipresenti.

Answer 2

Non avrai alcun controllo sulla rilevazione di tocchi, e anche se hai fatto i passi logici per capire cosa esattamente l'utente è provare a toccare è complesso e gestito al meglio dal dispositivo stesso.

La soluzione migliore è creare una versione mobile del sito o un foglio di stile alternativo che viene caricato quando si rileva un dispositivo mobile con Javascript.

Answer 3

Se si utilizza PHP, questa è una buona soluzione:

http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/

è possibile rilevare se il browser è un telefono cellulare dal serverside annusando i dettagli della richiesta del browser, e in caso affermativo, display alternativo/extra stylesheets/js/html

Answer 4

No, non esiste una cosa del genere. CSS ha l'opzione di dimensione dello schermo, che ti permetterà di ottimizzare il layout, ma questo è tutto. C'è anche media="handheld" ma anche questo non si applica alle tue esigenze.

Il rilevamento delle funzioni potrebbe funzionare utilizzando javascript, tuttavia, ci sono problemi con diversi eventi per diversi dispositivi. PPK (l'uomo dietro quirksmode.org) sta facendo una grande quantità di lavoro verificando quale javascript è possibile per ogni dispositivo mobile/portatile, e sta dimostrando che nulla sembra essere standard con questi dispositivi e tuttavia questo ANCORA non si applica al tuo requisito per i dispositivi touch laptop.
(onestamente non so perché si sono preoccupati per un dispositivo che non è nemmeno ancora uscito, essere pragmatici e preoccupare una volta che è qui e potete provarlo) opera

di PPK sul browser mobile e gli eventi di tocco, ti farà risparmiare ore Check it out here

Answer 5

Apple ha TouchEvents defined only for iPhone OS FWIW

Answer 6

Google Chrome ha una command line switch for enabling touch events. Disabilitato per impostazione predefinita. Quindi, fino a quando non li abiliteranno nuovamente a tutti (si spera che non lo faranno), è possibile rilevare il tocco con l'aiuto di javascript come descritto nella domanda. .

Aggiornamento 3 giugno 2010: Questo in realtà salì in versione stabile il 25 mag 2010 :(Non so che è stato un errore o no

hanno discusso la questione all'ordine del W3C. mailing list, ma dubito che qualsiasi cosa accadrà molto presto http://lists.w3.org/Archives/Public/www-style/2010May/0411.html potrebbero discutere di questo durante TPAC nel novembre

Aggiornamento 30 settembre 2010:.. Presumibilmente fisso in Chrome 6. non hanno avuto il tempo di effettuare il downgrade a stabile ancora verificare.Dal momento che Chrome aggiorna automaticamente questo problema dovrebbe essere già andato :)

Leggi questo se si sta pensando di utilizzare le media query: http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ e http://www.quirksmode.org/blog/archives/2010/09/more_about_medi.html

Aggiornamento 16 maggio 2011: W3C sta lavorando su un Touch Events specification , ma more or less refused per nascondere gli eventi di tocco per i terminali senza hardware touch. Quindi non aspettarti che il rilevamento degli eventi tattili funzioni a lungo.

Aggiornamento 6 giugno 2012: Le specifiche W3C CSS4 Media Query (Editors Draft) hanno qualcosa di molto interessante. Vedi il mio separate answer su questo.

Answer 7

Non è una soluzione completa, ma potresti voler semplicemente evitare qualsiasi piccolo pulsante. Mentre i pulsanti piccoli sono più un problema di usabilità su dispositivi touch, sono sempre difficili da usare, anche con un mouse grande schermo &.

Se si presta attenzione all'utilizzo di pulsanti sufficientemente grandi con spazio sufficiente tra loro, tutti ne trarranno vantaggio. Inoltre, ti costringerà a non ingombrare la tua interfaccia con troppi pulsanti piccoli :-).

Answer 8

Non so se una query media standard come Mozilla risolverà il problema da sola. Come uno degli sviluppatori di Chromium ha detto in quella discussione che hai collegato, la presenza del supporto di eventi touch nel browser non significa che gli eventi di tocco possono o si attivano, o anche se lo fanno, che l'utente vorrà solo interagire tramite input tattile . Allo stesso modo, la presenza del supporto dell'input tattile nel dispositivo non significa che l'utente utilizzerà quel metodo di input - forse il dispositivo supporta mouse, tastiera e input tattile e l'utente preferisce il mouse o una combinazione dei tre tipi di input.

Sono d'accordo con lo sviluppatore Chromium che il supporto degli eventi di tocco non era un bug nel browser. Un buon browser dovrebbe supportare gli eventi touch perché potrebbe essere installato su un dispositivo che supporta l'input tattile. È colpa dello sviluppatore del sito Web che abbia preso il supporto degli eventi per indicare che l'utente interagirebbe tramite touch.

Sembra abbiamo bisogno di sapere due cose: (1) Quali sono tutti i tipi di input supportati sul dispositivo (2) Quali sono tutti i tipi di eventi supportati nel browser

Dal momento che non lo facciamo conosco il n. 1 in questo momento, c'è un approccio proposto da PPK di quirksmode che mi piace. Ne parla qui: http://www.quirksmode.org/blog/archives/2010/02/do_we_need_touc.html#link4

In pratica, ascolta gli eventi tattili e gli eventi del mouse e, quando si verificano, imposta l'interfaccia utente di conseguenza. Ovviamente è limitativo per lo sviluppatore. Non penso che sia un approccio valido al tuo problema con le dimensioni del link perché non vuoi aspettare che l'interazione modifichi l'interfaccia utente. L'intero punto è presentare un'interfaccia utente diversa (un link più grande/più piccolo) prima che si verifichi un'interazione.

Spero che tu faccia la tua proposta e venga inclusa nel CSS3. Fino ad allora, per quanto mi addolori dirlo, l'user-agent sniffing sembra l'approccio migliore.

p.s. Spero che la speranza la speranza che qualcuno viene qui e mi ha sbagliato dimostra

Answer 9

provare a utilizzare le tabelle e fare una cella piena di essere un link ... sto lavorando su questo nel mio sito ... non funziona bene finora ... ma potresti trovare un modo ... in questo modo, non c'è bisogno di sovraccaricare il tuo sito web con javascript e rilevamento delle funzionalità ... puoi dargli una misura relativa di una dimensione fissa ... e in questo modo, il tuo sito web può essere visualizzato in un desktop come è visualizzato in un iphone ... pensare a questa idea ... qualsiasi sugestione è apprezzata ...

Answer 10

Buone notizie! La bozza di editor di CSS4 Media Queries include una nuova funzionalità multimediale 'pointer'.

Esempi tipici di un sistema di puntamento "fine" sono un mouse, un trackpad o uno schermo tattile basato sullo stilo. I touch screen basati su dita sarebbero considerati "grossolani".

/* Make radio buttons and check boxes larger if we 
    have an inaccurate pointing device */ 
@media (pointer:coarse) { 
    input[type="checkbox"], input[type="radio"] { 
     min-width:30px; 
     min-height:40px; 
     background:transparent; 
    } 
} 

E 'anche possibile testare la media query da JavaScript:

var isCoarsePointer = (window.matchMedia && 
         matchMedia("(pointer: coarse)").matches); 

Aggiornato 11 febbraio. 2013 Nelle versioni recenti di Windows 8 di Chrome (versione 24+) rileva il touch-hardware all'avvio dell'applicazione ed espone gli eventi di tocco. Sfortunatamente se "pointer: coarse" restituisce false, non c'è modo di sapere se è perché le media query del puntatore non sono implementate o perché c'è un puntatore fine. WebKit haven't implemented "pointer: bene" ancora, quindi non possiamo controllarlo neanche.

Aggiornamento 26 sett. 2012 Testato in Safari su iOS6 e Chrome su Android 4.1.1 e non è ancora lì. 'puntatore' e 'passaggio del mouse' media-query landed in WebKit 30 maggio. Secondo l'User-Agent, Safari utilizza il ramo WebKit 536.26 dal 25 aprile e Chrome su Android e anche uno più vecchio (535.19). Non sono sicuro che le diramazioni WebKit delle stringhe User-Agent siano attendibili, ma il mio test page non è in grado di rilevare neanche le query sui puntatori. Il implementation from May implementa solo la query media puntatore per dispositivi touch, quindi puntatore: fine non funziona per i dispositivi con un mouse.

Answer 11

Vedere http://crbug.com/136119 per il supporto per l'aggiunta di puntatore: bene in Chrome. In realtà è possibile rilevare se il puntatore: grossa è supportato (per distinguere unset da non supportato) - basta creare la query multimediale da soli e verificare in javascript se ha analizzato correttamente.

Ad esempio, oggi "@media (puntatore: grossa)". In Chrome si presenta:

> document.styleSheets[0].rules[5].media[0] 
"(pointer: coarse)" 

Ma non supportati valori fasulli come "@media (puntatore: gli altri)" Non fare:

> document.styleSheets[0].rules[8].media[0] 
"not all"