在不使用觸摸屏設備的情況下，使用媒體查詢最安全的方法是什么？如果無法解決，您是否建議使用JavaScript解決方案，例如!window.TouchModernizr或Modernizr？
3 回答
茅侃侃
TA貢獻1842條經驗 獲得超22個贊
我建議使用modernizr并使用其媒體查詢功能。
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
但是，使用CSS時，存在偽類，例如Firefox。您可以使用：-moz-system-metric（touch-enabled）。但是，并非所有瀏覽器都提供這些功能。
對于Apple設備，您可以簡單地使用：
if(window.TouchEvent) {
//.....
}
特別是對于Ipad：
if(window.Touch) {
//....
}
但是，這些在Android上不起作用。
Modernizr提供了功能檢測功能，并且檢測功能是一種很好的編碼方式，而不是基于瀏覽器進行編碼。
樣式觸摸元素
為此，Modernizer將類添加到HTML標記中。在這種情況下，touch并且no-touch使您可以通過.touch前綴您選擇風格你觸摸相關的方面。例如.touch .your-container。鳴謝：Ben Swinburne
蕪湖不蕪
TA貢獻1796條經驗 獲得超7個贊
實際上，CSS4媒體查詢草稿中有一個屬性。
“指針”媒體功能用于查詢指針設備（例如鼠標）的存在和準確性。如果設備具有多個輸入機制，則建議UA報告主要輸入機制中功能最弱的定點設備的特征。該媒體查詢采用以下值：
'none'-
設備的輸入機制不包括定點設備。
“粗略”
-設備的輸入機制包括精度有限的定點設備。
'精細'
-設備的輸入機制包括一個精確的指點設備。
可以這樣使用：
/* 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;
}
}
我還在Chromium項目中找到了與此相關的票證。
瀏覽器的兼容性可以在Quirksmode下進行測試。這些是我的結果（2013年1月22日）：
Chrome / Win：有效
Chrome / iOS：不起作用
Safari / iOS6：不起作用
- 3 回答
- 0 關注
- 438 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消