Chrome中的Device模块调式响应性设计
2015-07-23 23:27 龙恩0707 阅读(3238) 评论(0) 编辑 收藏 举报Chrome中的Device模块调式响应性设计
阅读目录
启用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事件也一样，我们只需要点击元素后，按住鼠标不动拖动就可以触发事件；
