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