Chrome设备模式模拟手机效果

今天偶然发现了一个Chrome的小功能，顿时就让我感觉JJ FLY!
就是这个玩意，可以模拟各种各样的移动设备↓（以下的测试网站为http://www.alessioatzeni.com/）

我想很多前端或者需要做一些这类工作的设计师也许会通过缩放浏览器窗口来达到查看页面效果，但是某些的界面效果可能无法查看必须得用真机测试才行。例如下拉加载之类的或者手势操作，如果你的公司是那种很小的小公司连测试机都没有的，那么这个玩意就起作用了。
开启了这个功能之后你的浏览器将支持各种手势操作。下拉刷新上拉加载之类的。。完全全变成了移动设备的操作模式

当然你的鼠标滚轮和键盘什么的还是有用的，开了这个模式之后鼠标会变成一个小黑点的
Gif↓

要打开这个玩意只要打开你的Chrome，然后按F12就得了 或者可以执行菜单——工具——开发者工具

打开之后，点击这个移动设备的小图标

注意这个图标好像是Chrome 38才有的。如果你的版本比我低的话可能会没有这个功能。

先来简单的说一下~拖动这里的两块东西能任意调节设备屏幕大小

接着来看上面橙色部分的选项，这个是选择各种要模拟的设备

亚马逊Kindle、苹果、谷歌Nexus、黑莓、HTC、LG、诺鸡鸭、摩托罗拉、三星、索尼。。。甚至Notebook都有。。。

下面的是当前设备的显示屏像素

去掉前面的这个勾勾，或者点击这个删除的按钮，网页将会回到你现在的浏览器显示大小

点这个还能快速切换横屏竖屏

这个是当前模拟的设备的像素比，例如：iPhone3GS是1、iphone4是2、iPhone6是3....

如果你在操作的时候遇到这个警告，那么你需要刷新下网页才能看到实际的显示效果

这里的这个Fit是如果你选择的模拟设备像素的显示范围超过了你的浏览器框框，那么就会根据你当前的显示器高度和宽度自适应的缩放显示比例。去掉勾选就是实际像素的显示了。

这个按钮是媒体查询

• 蓝色的是小于某个像素的媒体查询

• 绿色的是间于某两个像素之间的媒体查询

• 橙色的是大于某个像素的媒体查询

（以下的测试网站为http://www.alessioatzeni.com/）

可以看到这里有各种不同的区域范围，也就是说每个区域内的网页示效果都是不一样的，有多少行应该就是代表这个网页针对不同的分辨率的设备做了多少种自适应的CSS了。这个在浏览学习人家的响应式网页的时候你可以看看别人是怎么做的。

点击这一行行的媒体查询，可以将当前的网页显示大小快速的切换到这个媒体查询的屏幕大小区间内，第一次的点击会切换到所点击区间的屏幕最小值

再次点击则会切换到这个区间的最大值

然后我们来看看右边蓝色的部分 第一个Network貌似是用来模拟网络环境的

你可以模拟各种网络环境以测试网页的加载速度，甚至可以模拟断网的状态...

下面的这个UA是浏览器User Agent(用户代理)

什么是User Agent?

User Agent中文名为用户代理，是Http协议中的一部分，属于头域的组成部分，User Agent也简称UA。它是一个特殊字符串头，是一种向访问网站提供你所使用的浏览器类型及版本、操作系统及版本、浏览器内核、等信息的标识。通过这个标识，用户所访问的网站可以显示不同的排版从而为用户提供更好的体验或者进行信息统计；例如用手机访问谷歌和电脑访问是不一样的，这些是谷歌根据访问者的UA来判断的。UA可以进行伪装。 浏览器的UA字串的标准格式：浏览器标识 (操作系统标识; 加密等级标识; 浏览器语言) 渲染引擎标识版本信息。但各个浏览器有所不同。

简单来说用这个你就能把你的浏览器装成各种个样的浏览器和移动设备了。

这个其实其他的浏览器也有一样的功能，不过某些功能感觉没有Chrome的方便 例如搜狗浏览器，同样按F12打开开发者工具后，点击开发者工具右上方的按钮打开抽屉。在Emulation选项卡里面可以找到设备模拟

不过要点击Emluate按钮才会生效

Opera的话基本和Chrome一样

Firefox点下图的图标也可以（我的是开发者版）

不过能选的功能就感觉比较简单了

选项从左到右分别是：

• 离开响应式设计视图

• 模拟设备分辨率

• 旋屏

• 模拟触控

• 截屏

IE的话。。。默认只有WinPhone，感觉还是直接调浏览器大小吧。。。

Safari暂时没找到。。

最后，虽然这个能模拟各种各样的移动设备，但是由于不同机型不同浏览器之间的差异，实际的显示效果可能会有一点差异，但是一般情况下是没有太大问题的。这个功能也加速了移动网页的样式调整，以及手机浏览器上不能查看代码的问题。

排版渣对不起，谢观看!