Google Chrome开发者工具-移动仿真：设备取向和CSS媒体类型

设备取向（Device Orientation Overrides）

许多新的移动设备具有加速度计（accelerometers），陀螺仪（gyroscopes），指南针（compasses）以及一些其他用来确定运动捕捉和方向数据的硬件。很多网页浏览器可以访问这些新的硬件特性，比如通过HTML5 DeviceOrientation事件。这些事件为开发者提供关于设备取向，移动以及加速度方面的信息。

如果你的应用程序使用了设备取向事件，那么在桌面上对接收到的这些设备取向的取值进行覆盖修改会有助于程序调试，无需在真实设备上进行测试。

覆盖设备取向值

1. 打开Device Orientation演示页面
2. 你会看到一个标准的HTML5标志，以及当前设备取向值列表
3. 打开开发者工具中的覆盖（Overrides）菜单
4. 勾选"Override Device Orientation"
5. 你会看到三个字段：
   • α: 设备在z-轴向的旋转角度
   • β: 设备从左到右的倾斜角度
   • γ: 设备从前到后的倾斜角度
6. 修改取值如下：
   1. α - 0
   2. β - 60
   3. γ - 60

我们改变了左右倾斜和前后倾斜，这样结果是我们的应用模拟了一个顺时针方向的旋转。

CSS媒体类型仿真（CSS Media Type Emulation）

CSS 媒体类型允许我们依据所处的不同设备，来运用不同的样式。(比如 print, screen, tv, braille 等).

仿真媒体类型（Emulating media types）

1. 打开演示画面 HTML5 Rocks
2. 打开开发者工具中的覆盖（Overrides）菜单
3. 启用"Emulate CSS media" 并从下拉框中选择"print"媒体类型选项
4. 页面会被调整为使用和该CSS媒体类型匹配的样式，如果可用的话

Before:	After:

by iefreer