Chrome开发工具 设备模式 & 移动仿真

触控事件。如果想要了解关于设置多点触控模拟的更多信息，请参考 HTML5 Rocks 上“DevTools” 部分的网页多点触控开发指南。提示：可以使用这份代码来尝试结合 DevTools 调试器以及触控仿真。重写地理定位数据和电脑不同，移动设备一般会使用 GPS 硬件来监测位置信息。在设备模式下，你可以通过 Geolocation API 来模拟定位。在 sensors 面板下选中 Emulation geolocation coordinates 复选框可以开启定位模拟器。在地理定位信息无法使用的情况下，你可以使用模拟来重写 navigator.geolocation 的位置信息。提示：使用这份代码来实际体验一下地理定位模拟器。模拟设备屏幕方向如果你需要测试加速器信息，只需要使用 Orientation API。同时，你也可以使用加速计模拟器来模拟相关数据。在 sensors 面板中选中 Accelerometer 复选框来启用加速计模拟器。你可以对以下方向数据做出操作：α: z轴的旋转数值β: 从左向右的倾斜值γ: 从前向后的倾斜值你也可以直接点击并拖动加速计模型来将设备调整到需要的方向。提示：通过这份代码来实际尝试加速计模拟器。自定义设备设备模式提供了大量的仿真设备。如果你发现有些设备并没有涵盖到，那么你可以添加一个自定义的设备。要添加一个自定义的设备，请执行以下步骤：前往 DevTools 设置页面。激活 Devices 选项卡。点击面板底部的 "Add custom device" 按钮。在接下来显示的表单中填入相应的数据。点击 "Add Device"。开启设备模式然后在设备列表中找到你设置的自定义设备。添加新设备限制尽管 Chrome 的设备模式提供了许多实用的工具，它也有着一定的限制。目前已知的问题有以下这些：设备硬件问题GPU 和 CPU 还无法模拟。浏览器的 UI 问题移动系统的某些显示部分，比如地址栏，无法模拟。一些原生的显示模式，比如 <select> 元素等，无法模拟。一些增强功能，比如通过数字输入来打开键盘等行为，可能和实际设备不大相同。浏览器的功能问题在模拟器中使用了 WebGL 功能，但是在 iOS 7 的设备上并不支持该功能。Chrome 不支持 MathML，但是 iOS 7 设备支持该工呢过。iOS 5 方向缩放问题并没有模拟出来。CSS 的行高属性在模拟器中可以使用，但是 Opera Mini 并不支持该属性。一些 CSS 规则的限制，比如在 Internet Exploer 中的那样，并没有模拟出来。AppCache在模拟器中 AppCache 的 manifest 文件以及查看源请求并没有覆盖掉 UA。尽管有着上述诸多现实，设备模式模拟器依旧足以承担大多数工作。当你想在实际设备上测试的时候，你可以参考 DevTools 的教程 remote debugging 来了解更多信息。