2016-05-02 62 views
1

假設我有一個帶有鍵盤快捷鍵的網站,我希望將所述鍵盤快捷鍵直觀地顯示爲它們適用的任何元素的一部分。CSS媒體查詢是否連接了物理鍵盤

在觸摸界面,尤其是手機,我不想打擾這是因爲:

  1. 沒有人會使用軟鍵盤這樣即使他們能夠
  2. 鍵盤的視覺顯示快捷方式佔用了寶貴的房地產
  3. 這也許令人困惑,或至少不雅,在沒有鍵盤的情況下顯示的鍵盤快捷鍵

然而,媒體查詢文件似乎沒有提到這件事。

這是2016年,這仍然是不可能的?

+3

那麼,爲什麼不針對** **桌面只? *假設只有臺式機/筆記本電腦用戶使用物理鍵盤 – Aziz

+0

媒體查詢只能以**輸出**(屏幕,打印)和大小或方向爲目標......未輸入。因此,名稱**媒體**查詢,而不是設備查詢 –

+0

@Paulie_D那麼,有媒體類型,如「掌上」,「盲文」,「電視」等,這聽起來像設備,不是他們。 –

回答

2

媒體查詢4不提供任何媒體功能來確定是否連接了物理鍵盤。在WWW風格的郵件列表中提供MQ4或MQ5的這種功能並沒有什麼阻礙,但請記住,這樣的媒體功能對於供應商來說是否容易實現是另一回事。

+0

原諒我的無知,但什麼會使它很難實施? – Kev

+0

@Kev:只有熟悉瀏覽器引擎的人才能回答這個問題。我的觀點是,不能保證該功能將成爲優先事項,或者根本不會實現。 – BoltClock

+0

不夠公平,謝謝解釋。 :) – Kev

1

不幸的是,Media Queries 4中沒有查詢來識別鍵盤的存在。 還有其他新的查詢可能會有所幫助。

在我自己的應用程序中,我假設有一個鍵盤存在鼠標或觸摸板作爲主要輸入。您可以查詢與

@media (hover: hover) and (pointer: fine) { ... }

該查詢會去false與觸摸屏設備,手寫筆設備和像攝像機輸入也異國設備。

請注意,使用此查詢,您正在查詢主要輸入設備。您可以用 any-hoverany-pointer查詢所有輸入設備。

另外請注意,到目前爲止,並通過對MQ4是所有瀏覽器的81%,但沒有Firefox的:https://caniuse.com/#feat=css-media-interaction