测试响应式网页设计有时是一个挑战:测试不同的分辨率,打开开发人员/工具以查看发生了什么……好吧,我明白了。

我正在寻找可以添加到其中的内容Chrome浏览器使我可以轻松解决此问题。类似于Firefox上的Ctrl + Shift + m。



具有拖动窗口以更改分辨率的功能,以及具有一些预定义分辨率的下拉菜单




在Chrome上工作(扩展名)
具有预定义的分辨率或用于通知特定分辨率的框
能够拖动以创建分辨率(如窗口)
能够打开和使用Chrome开发工具

是否有扩展程序可以做到这一点,并且可以帮助我简单地测试响应式布局?

评论

PS:如果它是免费提供的工具,那就太神奇了

#1 楼

Chrome浏览器具有不错的UI伪造器以及一些预设的屏幕尺寸,其中包括DPI。

要使用这些出色的工具,请执行以下操作:


在按下F12键进入Chrome浏览器。

单击“开发人员工具”右上方的图标打开“抽屉”(这是一个大于号,位于彼此堆叠的三个水平线旁边)。或通过单击开发人员工具中的esc



单击“仿真”选项卡。您可以模拟触摸事件,地理位置坐标,加速度计数据,屏幕分辨率,用户代理等。

请注意,在Chrome版本30左右,这些选项已移至上述“抽屉”,但在较早的版本中可以在“开发人员工具设置”中找到的版本(齿轮齿轮图标)。

评论


不要试图打开讨论。转到聊天以辩论主题。

–米歇尔
2014年3月22日15:52

没有1900x1200之类的分辨率,因此无法调整大小。 (非常适合移动设备)

–米歇尔
2014年3月25日12:37

@Michel“无法调整大小”是指其他工具可以让您查看大于屏幕分辨率的视口吗?

–碧玉
2014年4月9日在20:18

#2 楼

我建议您尝试使用Window Resizer扩展。

它为您提供了一系列预定义的分辨率,当您选择这些分辨率时,浏览器窗口将缩小/增大这些分辨率。它还提供了窗口的当前显示大小,因此您可以根据需要手动进行调整。而且,由于它只是将窗口的大小更改为特定的分辨率,因此您仍然可以访问Chrome内部的开发者工具。

评论


Window Resizer扩展上的大标志。我曾经使用过它,但是开发它的人认为他们没有通过捐赠获得足够的钱,所以他们加入了一些代码,在页面上添加了广告链接。创建者未对此进行记录,我相信我已被删除,但我看不出任何方式可以信任开发者。 Chrome中也已经存在此功能。

–碧玉
2014年3月21日在22:51



#3 楼

我建议您使用适用于Chrome的Web开发人员扩展,该扩展的有趣之处在于它允许您添加自定义分辨率以调整浏览器窗口的大小。




不仅如此,它还允许您向“响应式”集合中添加自定义分辨率...



您可以在一个屏幕上查看所有这些响应式布局每个版本都具有可折叠性/可扩展性



除这些功能外,还有多种功能,例如禁用图像,JavaScript,Cookie处理,CSS禁用等,其中许多功能将帮助您使网站更快更清洁。

#4 楼

Chrome具有内置功能,可为您执行此操作。该工具为您提供了可供测试的常用电话尺寸列表,并提供了输入自己的电话的选项。它还更改了浏览器的用户代理,以匹配您要使用的电话。

进入基于电话的查看器


按F12键或打开开发人员工具
单击电话/平板电脑图标
从下拉菜单中单击要使用的尺寸