用IE 10触控事件模型调试响应式Web设计

  目前我正在研究IE 10触控事件。虽然我已经十分幸运地拥有了一台Windows 8平板电脑,但是我仍在寻找一种更加简便的方法,即无需每次切换至平板电脑,便可直接在经典笔记本上执行基本测试的方法。在寻找该方法的过程中,我发现了一些技巧和窍门,有了这些经验,您就可以在不使用触控设备的情况下,对代码中的IE 10触控事件进行调试了。正面效应:这种方法还可帮助您测试、调试响应式Web设计!

  先决条件:在学习本教程之前,首先需要执行下列步骤:

  IE 10触控事件模型

  如果您对触控执行方式还不甚了解,可以先阅读下列三篇文章:

  1.IE10浏览器及Metro Style应用程序的触控输入

  2.所有浏览器中的多点触控及鼠标输入处理

  3.使用Gesture事件实现超出Pan、Zoom及Tap范围之外的其他功能

  您可以参考作为补充资源的Pointer.JS库,该库模拟了面向其他浏览器的IE 10模型。

  Windows 8 模拟器模拟触控

  Windows模拟器安装了多种开发工具,一般用于测试、调试Metro Style应用程序。您可以通过阅读下面的文章了解更多详细信息:初识Windows模拟器。

  然而,我们完全可以使用模拟器来调试在IE10中运行的Web应用程序。下面我向大家介绍一下具体的实现方法。

  1.运行“Program Files (x86)Common FilesMicrosoft SharedWindows Simulator11.0”文件夹下的Microsoft.Windows.Simulator.exe,启动模拟器,然后再单击桌面图标。


  2.启动IE10浏览器,转向“Internet选项”——>“高级” 标签。检查“禁止脚本调试(Internet Explorer)”、“禁止脚本调试(其他)”是否未选中:


  3.转向需要测试与/或调试的URL。例如,测试下列测试用例:IE Test Drive下的Finger Painting。借助该模拟器,我们可以使用下列两个按钮来模拟经典的鼠标输入与/或触控切换模式。


  起初,您肯定会认为这样可以得到相同的结果:


  但是,单击下列按钮后:


  您会发现得到了缩放和旋转双重触控模拟效果:


  双重触控功能在下列测试用例的应用中会变得更加有趣:Browser Surface


  借助模拟器,您可以通过触摸手势来模拟缩放及旋转效果。

  使用Visual Studio 2012调试JavaScript代码

  如果您想更深入的测试与调试您的触控体验,您可能需要调试JavaScript代码。第一个显而易见的方法是按F12键,使用IE10开发人员工具。但是,如果在模拟器狭小的窗口中使用F12键,会让人感到很不舒服。

  另外一个比较好的解决方案就是使用Visual Studio 2012中的调试器。下面就是具体的实现步骤:

  1.在主会话(模拟器外部)上,启动Visual Studio 2012 RC Express,转到“调试”->“加载进程…”


  2.定位“iexplorer.exe”进程(“x86,Script”),加载:


  3.如果一切正常,使用Browser Surface测试用例得到的结果应如下图所示:


  如果不是这样,或许是因为您加载了错误的iexplore.exe进程或忘记去掉“禁用script调试”选项前的对勾。

  如果您选择了正确的进程,可以看到 “Script文件”节点下“解决方案资源管理器”右嵌条中的JavaScript文件。

  4.然后,我们将重点放在JavaScript的调试经验上。比如,打开“demo.js”文件,在第136行添加断点:

  if (Options.inertiaBounce()) { :

  5.拍摄图像,并使用触控模拟处理图像,图像应能自动打断Visual Studio:


  然后,逐步执行代码,查看JavaScript控制台输出,右键单击函数,直接跳转至函数定义。这样,您就可以获得高级调试体验了。

  总之,您无需借助任何触控设备,完全可以调试支持IE10浏览器的JavaScript触控逻辑。当然,您需要在真正的触控设备上测试最终代码及Web应用,从而真正了解代码在实际条件下是如何运行的。但是,该方法确实可以为您提供帮助,节省您的时间。

  响应式设计的测试与调试

  模拟器及VS 2012也可以帮助您测试、调试响应式设计。首先让我们回顾一下模拟器必须提供的内容。

  我在网络上寻找了执行响应式设计原则的最佳网站,并使用http://garretkeizer.com/网站上的下列截图。您可以找到在 http://mediaqueri.es上测试的其他比较酷的网站。

  下面是使用模拟器的默认设置在Internet Explorer 10浏览器中执行的网站设计。


  下面让我们回顾一下促使模拟器进一步执行的某些比较酷的选项:

  1.通过单击下列按钮,测试portrait或landscape模式下的设计改动。


  下图是所选网站的结果:


  2.通过单击下列按钮,还可以模拟各种形状系数及分辨率显示结果。


  3.下图是分辨率2560x1440下该网站的显示结果(对比之前默认分辨率为1366 x768时的截图):


  4.如果您想继续执行,可以使用VS 2012中的出色的DOM Explorer工具,帮助您检查及现场编辑CSS。例如,在加载调试器后,我们可以看到名为“DOM Explorer”的窗口。虽然您的鼠标放在HTML节点上,仍会看到模拟器中以亮色显示的各个区域。


  当然,您可以在Visual Studio中检查、编辑及追溯样式,修补潜在的CSS设计问题。我希望这些小技巧能够对您有所帮助,并节省您的时间。希望经常关注这些免费工具!

  文:CSDN

时间: 2024-09-17 04:11:31

用IE 10触控事件模型调试响应式Web设计的相关文章

IE 10触控事件

摘要: 目前我正在研究IE 10触控事件.虽然我已经十分幸运地拥有了一台Windows 8平板电脑,但是我仍在寻找一种更加简便的方法,即无需每次切换至平板电脑,便可直接在经典笔记本上执行基 目前我正在研究IE 10触控事件.虽然我已经十分幸运地拥有了一台Windows 8平板电脑,但是我仍在寻找一种更加简便的方法,即无需每次切换至平板电脑,便可直接在经典笔记本上执行基本测试的方法.在寻找该方法的过程中,我发现了一些技巧和窍门,有了这些经验,您就可以在不使用触控设备的情况下,对代码中的IE 10触

响应式web设计实现图片效果10款jQuery插件

1.基于jQuery实现的汇图网大屏焦点图效果 汇图网大屏jQuery焦点图代码,可设置切换模式,如淡入淡出切换,左右滚动切换,上下滚动切换,可设置是否自动轮播,可设置鼠标划过是否停止播放等.     在线演示 源码下载 2.HTML5基于SVG实现的过山车动画特效 今天我们要分享一款很酷的HTML5/SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,整体动画效果流畅自然,效果非常酷.     在线演示 源码下载 3.jQuery实现苹果官网页面上下滚动全屏效

《响应式Web设计:HTML5和CSS3实践指南》——2.10节基于before及after伪元素添加字符

2.10 基于before及after伪元素添加字符 就像在电视剧<迷离时空>(The Twilight Zone)中遗失的一集一样,CSS提供的新属性赋予了使用者在内容中添加伪标记的能力.可能听起来会有点奇怪,但这种方法却有着众多的应用场景.例如一个场景是,需要在显示的时候把文本内容放进引号之中,但是同时不想在内容或者主题文件中添加这些引号,显然这样是比较明智的做法.或者你也想通过标签和@标记尝试时下流行的Twitter,例如想要在内容之前添加#或是@符号.采用CSS标记方法即可完成功能,呈

ios-UIImageView的触控事件

问题描述 UIImageView的触控事件 下面这段代码显示图片: UIImageView *preArrowImage =[[UIImageView alloc]init ]; preArrowImage.image =[UIImage imageNamed:@"arrowprev.png"]; preArrowImage.frame = CGRectMake(20, 60, 10, 30); [self.view addSubview:preArrowImage]; 想要对preA

移动Web触控事件总结

移动web风风火火几多年,让我这个在Pc端漂流的前端er不免心生仰慕,的确入行几多年,也该是时候进军移动web了.移动web中踩到的第一个坑就是事件问题,所以在吸取众大神的经验后,特作总结以示后来者. 移动端事件的变化 首先PC端那一堆非常happy的鼠标事件没了,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave全都没了,click也与之前有所差别.取而代之的是几个原始的事件. -touchsta

用MVC模型引导你的WEB设计思路

web|设计 作者的blog:http://blog.csdn.net/oyiboy 习惯于过程式的开发,一直向往着面向对象.无奈半路出家人,没有一点内力基础,看了一大堆面向对象的书也只是看得一头雾水.对于MVC的概念也是偶然了解到的,感觉能和WEB开发结合起来让项目面向对象化.以下是我一点点心得.先介绍一下MVC的概念:MVC(Model-View-Controller),即把一个应用的输入.输出.处理流程按照Model.View.Controller的方式进行分离,这样一个应用被分成三个层-

用MVC模型引导你的WEB设计思路_经典网摘

作者的blog:http://blog.csdn.net/oyiboy 习惯于过程式的开发,一直向往着面向对象.无奈半路出家人,没有一点内力基础,看了一大堆面向对象的书也只是看得一头雾水.对于MVC的概念也是偶然了解到的,感觉能和WEB开发结合起来让项目面向对象化.以下是我一点点心得.先介绍一下MVC的概念:MVC(Model-View-Controller),即把一个应用的输入.输出.处理流程按照Model.View.Controller的方式进行分离,这样一个应用被分成三个层--模型层.视图

10款设计师必备的响应式网页设计工具

  随着便携设备用户的指数级增长,网页设计师采用响应式设计作为多平台布局解决方案,不但节省了设计师的时间,而且从长远角度来讲,响应式设计能够为用户提供更舒适的操作环境. 如果你毫无经验,不知从何开始,那么这份工具列表将大大的帮助你,能够让你的布局更有"弹性". Simple Grid Simple Grid是难以置信的CSS框架,无所限制的栅格布局,支持不同大小的屏幕. Susy Susy "语义变焦"的栅格系统,无需额外标记和特殊的类,很方便使用Sass的人. T

手指之舞 – 探讨Silverlight中的多点触控支持

每次去纽约的美国自然历史博物馆,我必定会好好参观一下灵长类馆.灵长类馆选择了大量的骨骼和剥制标本,展示了一幅灵长类动物进化的全景,动物从极小的树鼩.狐猴和绒猴一直到黑猩猩.大猩猩和人类. 这个展览最引人注目的是所有灵长类动物都有着惊人的共性:手的骨骼结构相同,包括一个对生拇指.这种使我们的祖先和远亲可以抓握从而爬上树枝的相同关节排列和数目,让我们的物种可以影响周围的世界和从事建造工作.我们的双手可能源于数百万年前小型灵长类动物的爪子,而双手也是使我们真正成为人类的重要因素. 我们会本能地伸出手指