对于web开发者来说，或许chrome开发工具并不陌生。编辑或copy html代码、修改或新增样式、又或者调试js代码，这些修改都能实时的在页面看到，这无疑是非常方便。但这些都不是本篇的重点，今天的主角是emulation，它也是开发工具中最重要的一项，主要是用于模拟手机浏览器页面的显示以及各种行为，随着chrome版本的不断升级，emulation也变得越来越健全，chrome39以后更是新增了标尺和快捷选项。emulation主要包含device、media、network和sensors四大项，以下介绍它们的详细用法：

Device（设备）

通过上图，我们可以知道device主要有model、Emulate screen resolution、Emulate mobile、shrink to fit四个选项。那么我们来看看它们的作用：

Model ：机型选择。你可以通过这个下拉选项选择你需要测试的手机机型。

Emulate screen resolution ： 模拟屏幕分辨率，而中间的左右箭头按钮用于切换横屏和竖屏。关于横竖屏的检测，我们可以通过css：

.screen-status{width:50%;height:180px;margin:0 auto;border:3px solid #ccc;border-radius:5px;line-height:180px;text-align:center;}
@media (orientation: portrait) {
　　.screen-status{background:#F90;}
　　.screen-status:after{content:"现在是：竖屏";}
}
@media (orientation: landscape) {
　　.screen-status{background:#9CC;}
　　.screen-status:after{content:"现在是：横屏";}
}
<div class="screen-status"></div>

具体demo：点击 或者扫描二维码

也可以通过js，默认的是采用orientationchange事件，对于不支持此事件的则可以利用reisze事件对窗口宽度进行探测：

var initScreenW = document.documentElement.clientWidth || document.body.clientWidth,
　　tempScreenW = 0 ;
function testScreenStatus(){
　　tempScreenW = document.documentElement.clientWidth || document.body.clientWidth;
　　if("onorientationchange" in window){
　　　　if(window.orientation==180||window.orientation==0){
　　　　　　alert("现在是：竖屏");
　　　　}
　　　　if(window.orientation==90||window.orientation==-90){
　　　　　　alert("现在是：横屏");
　　　　}
　　}
　　else{
　　　　if(tempScreenW>initScreenW+50){
　　　　　　alert("现在是：横屏");
　　　　}
　　　　else{
　　　　　　alert("现在是：竖屏");
　　　　}
　　}
}
testScreenStatus();
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", testScreenStatus,false);

具体demo：点击 或者扫描二维码

下面的Device pixel ratio是像素比，即设备的物理像素与设备独立像素的比例。

Emulate mobile ：模拟手机屏幕视窗，即viewport，它将手机浏览器模拟成pc浏览器来显示网页。手机浏览器开发商设置了一个meta元素，它的name属性值为viewports，它还有content属性，主要设置手机屏幕视窗的宽度、以及相关的初始、最小、最大比例和是否允许用户缩放网页。完整属性如下：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

shrink to fit ：表示网页是否随浏览器的缩放而变化。

Media（媒体）

这里的media指的是媒体类型，在选项中我们可以看到有这么多种：

  1. braille 盲文触觉设备
  2. embossed 盲文打印机设备
  3. handheld 手持设备
  4. print 手持设备
  5. projection 投影设备
  6. screen 彩屏设备
  7. speech 类听觉媒体设备
  8. tty 电传打字机终端（设备）
  9. tv 电视
  10. all所有媒体

而关于css媒体查询，指的是让你有能力在相同的样式表中，针对不同的媒介使用不同的样式规则。你可以采用链接的做法：

<link href="css/print.css" rel="stylesheet" type="text/css" media="print and (max-width: 600px)" />

也可以使用如下语法:

@media [media type] and (condition){
　　div{…}
}

假设只想针对最大宽度为320像素的屏幕应用此样式，你可以：

@media all and (max-width: 320px){
　　div { width:320px;}
}

当然，你也可以限制一个宽度范围：

@media tv and (min-width:1000px) and (max-width: 1200px){
　　div { width:1000px;}
}

Network（网络）

Limit network throughput：限制何种流量来浏览网页。是gprs？3g？还是wifi、或其他

Spoof user agent ：模拟手机是何种系统

Sensors（传感器）

Emulate touch screen ：模拟手机端触摸事件，当勾选此项时，你会看到屏幕有一个灰色圆点。

Emulate geolocation coordinates ：是否模拟地理信息

Accelerometer：模拟手机上下、左右、前后倾斜，这个可用于方向类游戏开发。

α：alpha，围绕Z轴旋转时（即顺（逆）时针旋转时），y轴的度数差；是一个介于0到360之间的浮点数
β：beta，围绕X轴旋转时（即前后翻转设备时），z轴的度数差；是一个介于-180到180之间的浮点数
γ：gamma，围绕Y轴旋转时（即左右扭转设备时），z轴的度数差；是一个介于-90到90之间的浮点数

最后是关于模拟手机倾斜的demo：点击 或者扫描二维码。