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

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

我可以使用哪些啓發來決定他們是否需要 - 也就是說，無論是不可能或難於使用輸入箭頭鍵的事件 - 以外識別特定使用者代理（這很簡單，但不是面向未來的）？

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

來源

2011-01-14 Kevin Reid

最好的選擇是檢測是否有鼠標。但是，檢測真正的鼠標事件而不是模擬鼠標是一件痛苦的事情。我解決了這個問題，請參閱：http://stackoverflow.com/a/15415643/342275。 – marknadal 2013-03-14 17:05:41

而不是嘗試猜測，使其成爲用戶選擇的配置選項。

來源

2011-01-14 21:06:33 Satya

當然。這是嚴格的第一次運行的經驗。 – 2011-01-14 21:09:28

而不是默認顯示屏幕上的鍵盤，添加一個按鈕來切換屏幕上的鍵盤的顯示。

讓屏幕鍵盤具有調整大小的功能也是明智的做法。

編輯回答問題：

鍵盤應該在默認情況下，如果大多數用戶都將是一臺計算機上隱藏，

默認可見，如果大多數用戶都將是上一個移動設備。

來源

2011-01-14 21:11:22 zzzzBov

我同意，我第一次運行時會建議沒有鍵盤，但有一個簡單/明顯的切換選項可供用戶使用。 – 2011-01-14 21:17:14

請注意，我的問題是「......應該默認顯示」。*我當然會爲控件提供切換。我在詢問切換*的初始狀態應該是什麼。 – 2011-01-14 22:41:05

如果你只有箭頭（左/右/上/下），你可能會考慮在遊戲領域添加觸摸事件？這不會佔用太多的空間，因爲它在遊戲的頂層進行分層，所以它可能會「永遠在線」。

計算機用戶甚至不知道它在那裏，儘管他/她可以使用它們用鼠標來玩我的遊戲。
另一方面，觸摸設備用戶可以更容易地使用「區域」（例如中間頂部，左中部，中部底部和右中部），因爲.. .. ..觸摸，而不是使用老鼠。

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

即使你有4個按鈕和一個'火'，你可以做到這一點，例如添加一個'中間'部分。

來源

2012-01-04 21:42:26 Nanne

感謝您的想法！除了方向之外，沒有其他的控件。 – 2012-01-04 21:48:49

尋找觸摸特定的事件，如touchstart或gesturestart，並顯示屏幕上的控件，如果檢測到。

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

我不知道，如果系統信息的API已經通過任何瀏覽器中實現： http://www.w3.org/TR/system-info-api/

來源

2012-01-05 21:19:12 ERR0

我認爲這是問題的正確答案 - 即使@AshleysBrain的建議是最簡單可靠的。根據[www.alastairc.ac]（http://alastairc.ac/testing/touch_events.html），用於實現觸摸檢測的「ongesturestart」更爲可取。我會簡化頁面上的檢查代碼：var e = document.createElement（'div'）; return（'ongesturestart'in e）;`但是我懷疑這是否是未來的證明。我能想到的當前最強大的變體是測試普通觸摸事件（'ontouchstart'）和媒體查詢最大寬度/高度的組合 – V02460 2012-01-11 04:27:36

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

有一個標題屏幕，說「按繼續」。
點擊或按鍵，隱藏觸摸控制並開始遊戲。
觸摸時，顯示觸摸控制並開始遊戲。

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

來源

2012-01-06 17:42:17 AshleysBrain

這非常違反直覺，我會強烈建議實施它。 – 2012-01-10 22:20:30

使用特徵檢測與Modernizr的：http://www.modernizr.com/docs/#touch

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

來源

2012-01-07 14:48:31

-3

你可以使用JavaScript來找出窗口的高度查看端口，然後我們的if語句說：

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

編輯：在$(window).height() <= "960"

來源

2012-01-10 20:53:33 swenflea

另一種方式結束左明）將可以將滑動事件&鍵碼綁定到相同的功能上 - 所以兩者都可以同時工作（確定取決於遊戲是否接受滑動 - 或者在屏幕上有一些遊戲手柄控件）。

這甚至涵蓋了答案評論中提到的dis-advance，我剛剛注意到了。

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

我迄今使用過的最好的是巴德的機器人故事。

提示：最好控制遊戲中的方向性移動將是tap-hold事件。所以人們可以輕敲...需要光標和屏幕中心之間的一些不可見的構造線 - 以測量運動矢量的度數。

我們甚至可以通過壓力的值來控制速度 - 目前不知道該屬性是否可以從JavaScript中訪問 - 或者僅在Android SDK中可用？

在平行王國中，單擊會移動（但角色並不總是在屏幕中間，就像使用上面提到的tap-hold方法一樣）。

來源

2013-02-16 17:56:01

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

回答

相關問題