CSS觸摸/小設備沒有觸摸標記爲未觸摸過

Question

我使用的近代化到觸摸/不觸摸到我的網頁，我目前有以下CSS：

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

我曾經使用：

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

我想要那種將它們合併，以便爲1,024像素和更小的設備也被歸類爲觸摸設備，而不是無觸摸設備...

在同一時間，我也遇到了問題，它暫時同時暫時加載桌面/移動內容的時間在一瞬間。

任何想法如何做到這一點，我敢肯定它會很簡單，但我根本無法解決它。

我嘗試下面的代碼，但這隻會因爲「INTIAL」大量的CSS去怪異

@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

您可以使用JavaScript/jQuery來檢測觸摸裝置相應地添加或刪除類。

<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>