點擊手機/平板電腦，懸停在其他設備（面向未來）

需要一個想法，我陷入了相當難題。我正在構建一個敏感的未來證明網頁設計。點擊手機/平板電腦，懸停在其他設備（面向未來）

在桌面設備和類似設備上：我有一個懸停的菜單，用來描述隱藏在鏈接後面的內容，點擊導航到新頁面。

在移動設備上：我希望觸發懸停（因此描述描述）和觸摸編號2時觸摸事件，然後導航到新頁面。

以上是可行的，但沒有檢查用戶代理如何做到這一點，這是我的情況。人們如何去證明上述的未來。

任何偉大的想法都更受歡迎。 :)

來源

2014-08-29 Reborn

你可以試驗寬度。如果它低於600，則將'isMobile'設置爲true並使用該變量來測試屏幕寬度。雖然爲什麼沒有使用者？您是否在前端公開敏感數據？你爲什麼在乎？ – 2014-08-29 07:22:57

嗅探用戶代理並轉到下一個項目。可悲的是，除非它是純HTML，否則沒有真正的未來證明。即使如此...... – Will 2014-08-29 07:25:02

由於顯而易見的原因，檢查用戶代理將是一個問題，因此我希望避免它，並且檢查屏幕也是一個問題，因爲奇怪大小的觸摸設備數量衆多。我想如果我可以檢查是否它是一個觸摸啓用設備，我會有點解決我的問題。 – Reborn 2014-08-29 07:28:24

使用Javascript在touchstart/touchend事件中添加一個類。瀏覽器不會發出這些事件：

的Javascript：

document.querySelector("#myMenu").addEventListener("touchstart", function() { 
    this.classList.add("mobileHovered "); 
}); 
document.querySelector("#myMenu").addEventListener("touchend", function() { 
    this.classList.remove("mobileHovered"); 
});

CSS：

#myMenu:hover, 
#myMenu.mobileHovered { 
    /* CSS styles */ 
}

來源

2014-08-29 07:39:22 CodingIntrigue

完美和簡單的解決方案，現在爲什麼我沒有想到這一點？ :) thx allot :) – Reborn 2014-08-29 08:10:26

點擊手機/平板電腦，懸停在其他設備（面向未來）

回答

相關問題