HTML5的設備方向模擬器

Question

HTML5解釋器（又名Web瀏覽器）是否有定向設備模擬器/模擬器？

我在HTML5中玩弄DeviceOrientation Event Specification，我可以編寫一個適用於我的Android智能手機瀏覽器的示例。

但是，在開發階段，我想直接在我的電腦上試用代碼，我正在尋找一個設備方向模擬器。

對於Android的我發現OpenIntents Sensor Simulator，因爲你需要在應用特殊的Java代碼，因此它是不是在Web瀏覽器中可用的（除非您使用一些特殊的一個），這是沒有用的。有沒有其他Android設備模擬器直接在瀏覽器中工作？

我也無法找到任何Firefox的模擬器。

任何其他解決方案？

Answer 1

那麼在Chrome中有此

非動畫版：

1. 開放開發工具fromt漢堡包菜單
2. 按ESC鍵或單擊>_圖標
3. 選擇仿真選項卡
4. 單擊電話圖標

請注意，Chrome的devtools仿真顯然存在一些問題，因此還有this device orientation emulation library。

Answer 2

但是，在開發階段，我想直接在我的電腦上試用代碼，我正在尋找一個設備方向模擬器。

有Xcode其中有一個iPhone模擬器，你可以改變方向。 Android SDK還允許您創建虛擬Android設備，您可以像使用真實手機一樣使用虛擬Android設備，但可以在計算機屏幕上使用。 另外還有Opera mobile emulator，它的功能與Opera Mobile相同。

然後，您可以使用Prefix free開發您的代碼，以便您不必擔心CSS的供應商前綴。

Mozilla suggests你測試這些設備/模擬器/仿真器，還可以直接在設備，因爲它會稍微從你會得到你值得信賴的電腦上看到的不同上。

而且，最後但並非最不重要（並且只與你的問題略有關聯），真的有很棒的東西，比如Weinre，Adobe Shadow和新的Safari 6 Webinspector，它們可以讓你調試JavaScript並從你的計算機編輯DOM和CSS。裝置。 Shadow甚至可以讓你一次重新加載一些連接的設備。

Answer 3

我看到其他人建議使用Chrome DevTools模擬器，但現在似乎有錯誤（請參閱，例如https://code.google.com/p/chromium/issues/detail?id=504343）。

作爲對這些問題的迴應，我剛建立了自己的deviceorientation模擬器。

https://github.com/richtr/deviceorientationemulator

我一直在W3C規範DeviceOrientation了一段時間，我應該在這一點上，這個說：在任何桌面瀏覽器使用這種基於彈出仿真器說明，可在發現模擬器目前會生成與當今Android上任何Chromium瀏覽器中運行Web應用程序時所獲得的設備相同的設備數據。

希望Chromium DevTools模擬器很快就會更新，但在此期間我希望這是有用的。