Google Chrome开发者工具-移动仿真：仿真设备视角和用户代理

接着上篇：Google Chrome开发者工具-移动仿真：触摸事件仿真

仿真设备视角（Emulating Device Viewports）

先在桌面上构建原型然后再在想要支持的移动设备上处理移动相关部分，这样要容易些。设备模拟让这个过程更加直接。开发者工具（DevTools）支持包括用户代理和设备尺寸覆盖（User Agent and dimension overriding）在内的设备仿真。 这允许你去仿真和调试移动视角的问题，比如不同设备和设置下的CSS媒体查询（media query）断点。


改变用户代理会使用相应设备的像素尺寸来预填该设备度量（Device metrics）的值。比如，选择Nexus S将把分辨率预填为480x800。

注意

屏幕分辨率值旁边的按钮Swap dimensions将把宽高互换；
Shrink to fit 确保仿真设备屏幕在浏览器窗口中可见；
设备媒体查询(e.g

@media only screen and (min-device-width:768px){}

) 会根据这里设置的数值而被启用；
在仿真设备视角设置时，你可能会想解除开发者工具的停靠位或者把它停靠到右边；
设备设置（settings）可以独立配置于设备预置（preset）。

目前，设备度量不会模拟定义在如下语句中的行为

<meta name="viewport">标签

或 (

@viewport { … }

规则。不过你可以通过额外的命令行标志来启用这些行为：

Chrome --force-compositing-mode --enable-threaded-compositing --enable-pinch --enable-viewport --enable-fixed-layout

使用这些标志，视角设置将能正常工作。（07/02/2014 by iefreer：A bit outdated）

用户代理仿造（Useragent Spoofing）

模拟用户代理打开 Chrome for mobile 首页
打开开发者工具（DevTools）的Overrides设置
勾选"User Agent"
选择"Android 2.3 - Nexus S"
第一个结果是，当前页面的用户代理（User Agent）字符串改变为Android 2.3。其二，设备度量被自动启用并设置为选中设备的大小。


by iefreer