檢測瀏覽器在網頁中是否有鍵盤/箭頭鍵

Question

我有一個 HTML+JavaScript 的全屏游戲，它使用箭頭鍵作為主要控件。 這不能在無鍵盤的 Android 設備上使用（我沒有在 iOS 上測試過），即使軟鍵盤有箭頭鍵，它也會占用不必要的空間。 因此，我添加了屏幕控制按鈕。 然而，這些按鈕在桌面瀏覽器上是不必要的（而且非常大），所以我希望它們不會彈出，除非需要它們。

除了識別特定的 User-Agents （這很簡單，但不是面向未來的），我可以使用什么啟發式方法來決定是否需要它們——也就是說，用戶輸入箭頭鍵事件是否不可能或尷尬？

我當然會允許用戶隱藏/顯示按鈕； 我正在尋找有用的啟發式方法來選擇默認設置。

Answer 1

不需要任何用戶代理嗅探、配置選項或任何類型的猜測。 只需這樣做：

1. 有一個標題屏幕，上面寫着“按繼續”。
2. 單擊或按鍵時，隱藏觸摸控件並開始游戲。
3. 觸摸時，顯示觸摸控件並開始游戲。

您甚至不需要向用戶提及該選項，並且您可以完美地自動檢測到他們的首選控件。

Answer 2

使用 Modernizr 進行特征檢測： http : //www.modernizr.com/docs/#touch

雖然這不是檢查用戶是否有鍵盤的可靠方法，但查看瀏覽器是否能夠觸摸是絕對可靠的。

Answer 3

不要試圖猜測，而是讓它成為用戶選擇的配置選項。

Answer 4

如果您只有箭頭（左/右/上/下），您可能會考慮在游戲區域內添加觸摸事件？ 這顯然不會占用空間，因為它位於游戲頂部，因此可以“始終開啟”。

• 計算機用戶甚至不知道它在那里，盡管我猜他/她可以用它們用鼠標玩你的游戲。

• 另一方面，觸摸設備用戶可以更輕松地使用“區域”（例如上中、左中、下中和右中），因為……嗯……觸摸而不是使用鼠標。

這可能需要一些解釋，因為您可能不希望這些點對用戶可見，但感覺這是一個有效的選擇。

即使您有 4 個按鈕和一個“火”，您也可以這樣做，例如添加一個“中間”部分。

Answer 5

查找特定於觸摸的事件，例如 touchstart 或gesturestart，並在檢測到時顯示屏幕控件。

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

我不確定 system-info api 是否已被任何瀏覽器實現： http : //www.w3.org/TR/system-info-api/

Answer 6

與其默認顯示屏幕鍵盤，不如添加一個按鈕來切換屏幕鍵盤的顯示。

賦予屏幕鍵盤調整大小的能力也可能是謹慎的。

編輯回答問題：

如果您的大多數用戶將使用計算機，則默認情況下應該隱藏鍵盤，

如果您的大多數用戶將使用移動設備，則默認情況下可見。

Answer 7

另一種方法是將滑動事件和鍵碼綁定到相同的功能 - 因此兩者都可以同時工作（當然，這取決於游戲是否接受滑動 - 或者屏幕上有一些游戲手柄控制）。

這甚至涵蓋了答案評論中提到的推進，我剛才注意到了。

在大多數情況下，屏幕上的點擊控制太難使用（S-NES Emu）。

到目前為止我用過的最好的是Bard的Droid故事。

提示：最適合控制游戲中的方向移動的是點擊保持事件。 因此，人們可以輕拍......在光標和屏幕中心之間需要一些不可見的構造線 - 以便測量運動矢量的度數。

有人甚至可以通過壓力值控制速度 - 目前還不確定是否可以從JavaScript中訪問該屬性 - 或者這是否僅在Android SDK中可用？

在並行王國中，單擊會移動（但字符並不總是在屏幕的中間，就像上面提到的點擊保持方法一樣）。

Answer 8

您可以考慮檢查顯示尺寸。 如果顯示尺寸小於一定尺寸，您可以假設它是移動設備並且可以顯示箭頭按鈕。 其他明智的使用鍵盤按鈕。

您還可以保留一個選項，以便用戶可以在需要時手動設置。

Answer 9

您可以使用 javascript 來找出 windows 視口的高度，然后我們使用 if 語句說：

if ($(window).height() <= "960")) {
    //Your code to display keyboard controls
    //P.S. 960 is height of iPhone 4+ screen
}

編輯：在$(window).height() <= "960"結尾處被$(window).height() <= "960"