【问题标题】:Device orientation emulator for HTML5HTML5 的设备方向模拟器
【发布时间】:2015-08-22 00:54:26
【问题描述】:

是否有用于 HTML 5 解释器(又名网络浏览器)的定向设备模拟器/模拟器?

我正在使用 HTML 5 中的 DeviceOrientation Event Specification,我能够编写一个适用于我的 Android 智能手机浏览器的示例。

但是,在开发阶段,我想直接在我的 PC 上工作以尝试代码,并且我正在寻找一个设备方向模拟器。

对于 Android,我找到了OpenIntents Sensor Simulator,它没有用,因为您需要在应用程序中包含特殊的 Java 代码,因此它在网络浏览器中不可用(除非您使用一些特殊的代码)。是否有任何其他适用于 Android 的设备模拟器直接在浏览器中运行?

我也找不到任何 Firefox 模拟器。

还有其他解决方案吗?

【问题讨论】:

  • 我不是关于肖像/风景,我要实时读取指南针方向设备,cmp规范。

标签: html firefox android-emulator


【解决方案1】:

Chrome 有这个

非动画版:

  1. 从汉堡菜单打开开发者工具
  2. 按 ESC 或单击 >_ 图标
  3. 选择仿真选项卡
  4. 点击电话图标 ?

请注意,Chrome 的 devtools 仿真显然存在一些问题,因此还有 this device orientation emulation library

【讨论】:

  • 谢谢,2.5 年后,这就是我当时所寻找的。​​span>
【解决方案2】:

但是,在开发阶段,我想直接在我的 PC 上工作以尝试代码,并且我正在寻找一个设备方向模拟器。

Xcode 附带一个 iPhone 模拟器,您可以使用它来改变方向。 Android SDK 还允许您创建虚拟 Android 设备,您可以像使用真正的手机一样使用它们,但可以在计算机屏幕上使用。 还有 Opera mobile emulator 对 - Opera Mobile 也是如此。

然后您可以使用Prefix free 来开发您的代码,这样您就不必担心 CSS 的供应商前缀。

Mozilla suggests 您在这些设备/模拟器/仿真器上进行测试,也可以直接在设备上进行测试,因为它与您在可信赖的计算机上获得的结果略有不同。

最后但并非最不重要的一点(仅与您的问题稍有相关)有一些非常棒的东西,例如 Weinre、Adobe Shadow 和新的 Safari 6 Webinspector,可让您在计算机上调试 JavaScript 并编辑 DOM 和 CSS在设备上。 Shadow 甚至可以让您一次重新加载几个连接的设备。

【讨论】:

【解决方案3】:

我看到其他人建议使用 Chrome DevTools 模拟器,但现在似乎有错误(参见例如https://code.google.com/p/chromium/issues/detail?id=504343)。

作为对这些问题的回应,我刚刚构建了自己的设备方向模拟器。在在任何桌面浏览器中使用这个基于弹出的模拟器的说明可以在以下位置找到:

https://github.com/richtr/deviceorientationemulator

我研究 W3C DeviceOrientation 规范已经有一段时间了,在这一点上我应该说,这个模拟器当前生成的设备方向数据与您今天在 Android 上的任何 Chromium 浏览器中运行 Web 应用程序时所获得的数据完全相同。

希望 Chromium DevTools 模拟器很快会更新,但在此期间我希望这很有用。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-07-23
    • 2010-12-11
    • 1970-01-01
    • 1970-01-01
    • 2012-01-08
    • 1970-01-01
    相关资源
    最近更新 更多