Chrome中的Device模块调式响应性设计

Chrome中的Device模块调式响应性设计

阅读目录

• 启用Device模块
• Device模块设置介绍
• 自定义预设介绍
• 查看media queries
• 触发触摸事件

回到顶部

启用Device模块

点击chrome浏览器右键 ---》 审查元素 --》 点击Toggle device Mode图标按钮即可打开Device模块，如下所示：

打开后如下界面；

如上网页是在网上找的一个响应性的简单网站  http://www.zuixiandao.cn/index.html

回到顶部

Device模块设置介绍

开关屏幕分辨率可以勾选如下复选框：

比如正常的页面如下：

勾选后的页面如下：

我们勾选后还可以自定义宽度和高度如下手动设置：

切换横屏还是竖屏可以点击如下按钮：

我们在上面还可以模拟设备，点击出现下拉框，如下：

我们还可以模拟网络情况，比如2G，3G，4G网络的情况下；

回到顶部

自定义预设介绍：

点击浏览器视图右上角的More overrides图标，打开如下界面：

我们可以点击左侧的Device菜单项后，选择右边的Model下拉框，可以模拟设备。这个 emulation 面板的功能与 上面介绍的device 模块界面上基本一致.

如下所示：

我们可以勾选Emulate screen resolution复选框，在输入框内设置屏幕宽度和高度来查看页面显示情况；如下：

Emulate mobile复选框勾选是 模仿移动设备显示；如下勾选：

不勾选此复选框，如下显示：

我们还可以在Network选项卡中，模拟网络情况，因为移动端用户，在网络变化情况下，优化网站性能是很关键的。如下下拉框（和device界面一样的下拉框），如下所示：

回到顶部

查看media queries

DevTools 会检测你样式表里面的 Media Queries 代码并且在上面标尺中用不同颜色条显示出来。

Media Queries 的颜色定义遵循下载面规则：

（蓝色）查询一个最大宽度

（绿色）查询某一个范围内的宽度

（橙色）查询一个最小宽度

右键工具栏可以查看这条Media Query是哪里定义的，并且可以跳转到对应的源代码的位置，如下所示：

点击后，打开css界面；如下所示：

上面我们谈到，绿色代表的是某一个范围的宽度；同理，蓝色的含义是查询一个最大的宽度，登色代表是一个最小宽度。

提示：当我们使用 Media Query 查看器的时候，你可能并不需要每次都使用手机模拟器。不退出 device 模块而关掉手机模拟器，你可以点击如下界面的按钮：

回到顶部

仿真触发触摸事件

触摸屏模拟移动端触摸事件（比如有touchstart，touchmove和touchend事件）等。比如模拟touchstart事件，我们使用鼠标点击一下对应的元素即可，比如模拟touchmove事件，我们只要点击元素，不放手拖动就会触发事件；

在传感器面板勾选 Emulate touch screen复选框即可使用，如下所示：

启用后，当你把鼠标放在模拟器视图的时候，手机图标会变成一个指尖大小的圆圈，同时触摸事件（诸如 touchstart，touchmove，和 touchend）会像在手机设备上那样被触发。

为了做一个demo来演示下效果，我们可以查看 http://www.zuixiandao.cn/index.html 网站的js，可以在请求里面找到一个index.js, 我们把此代码复制一份存到本地，用fiddler代理一下替换线上的index.js文件后，找到页面上的id元素，然后对id元素监听touchstart事件和touchmove事件即可来演示下，比如我找到页面中最底部的 分享到微博按钮 有一个id，我们只需要对这个id来监听touchstart和touchmove事件即可；如下代码：

var down = document.getElementById("sina");

down.addEventListener('touchmove',function(){

alert(1);

});

然后保存后，刷新对应的页面，在电脑上点击一下就相当于在移动端触摸下效果一样，我们可以看到弹出对话框1了；同理touchmove事件也一样，我们只需要点击元素后，按住鼠标不动拖动就可以触发事件；