CSS für touch/keine Berührung mit kleinen Geräten wie No-Touch markiert werden zu

Question

Ich Modernisierer mit touch/no-touch Seite zu Favoriten hinzufügen, und ich habe zur Zeit die folgenden CSS:

.touch .desktop_only { 
     display: none !important; 
} 
.no-touch .mobile_only { 
     display: none !important; 
} 

I verwendet zu verwenden: sie

@media only screen and (max-width: 1024px){ 
    .desktop_only { 
     display: none !important; 
    } 
} 
@media only screen and (min-width: 1025px){ 
    .mobile_only { 
     display: none !important; 
    } 
} 

ich versuche irgendwie zu verschmelzen so Geräte, die 1024px und kleiner sind auch als Touch-Geräte, statt No-Touch-Geräte ...

zur gleichen eingestuft werden Zeit renne ich auch in eine Problem, bei dem vorübergehend sowohl der Desktop- als auch der mobile Inhalt für einen Bruchteil einer Sekunde geladen wird.

Jede Idee, wie dies zu tun ist, ich bin sicher, es wird einfach sein, aber ich kann es überhaupt nicht erarbeiten.

Ich habe versucht, den Code unten, aber das macht einfach eine Menge der CSS wegen des „intial“ weird geht

@media only screen and (max-width: 1024px){ 
    .desktop_only { 
     display: none !important; 
    } 
    .touch .desktop_only { 
      display: none !important; 
    } 
    .no-touch .mobile_only { 
      display: initial !important; 
    } 
} 
@media only screen and (min-width: 1025px){ 
    .mobile_only { 
     display: none !important; 
    } 
    .touch .desktop_only { 
      display: initial !important; 
    } 
    .no-touch .mobile_only { 
      display: none !important; 
    } 
} 

Answer 1

können Sie JavaScript/jQuery verwenden, um die Touch-Geräte zu erkennen und addieren oder Klasse entfernen entsprechend .

<script> 
$(document).ready(function() { 
    var ua = navigator.userAgent; 
    function is_touch_device() { 
     try { 
      document.createEvent("TouchEvent"); 
      return true; 
     } catch (e) { 
      return false; 
     } 
    } 

    if ((is_touch_device()) || ua.match(/(iPhone|iPod|iPad)/) 
    || ua.match(/BlackBerry/) || ua.match(/Android/)) { 
     $('html').addClass('touch'); 
    } else { 
     $('html').addClass('no-touch'); 
    } 
}); 
</script>