3

我正在努力使我的网站更具响应性。如果我将浏览器宽度减小到最小宽度,这是否可以很好地替代测试在移动设备上会发生什么?

我没有 iPad Mini 或 Galaxy S2/3 等设备,但仍想确保网站在它们上看起来不错。

4

7 回答 7

4

Ctrl + Shift + M在火狐(Windows)上

Cmd + Option + M在火狐(Mac)上

于 2013-04-24T16:12:16.417 回答
3

如果您想在本地测试您的设计,在浏览器中,您可以使用 Web Developer Add-On,​​它可以让您选择查看响应式布局

在此处输入图像描述

此外,您还可以获得大量在线网站,这些网站将为您完成这项工作

于 2013-04-24T15:22:48.393 回答
2

如果您正在使用媒体查询,那么只需调整浏览器的大小即可。您可以通过使用诸如萤火虫之类的检查工具并检查主体宽度来密切关注窗口大小。

于 2013-04-24T15:23:51.017 回答
1

CHECK Responsinator:帮助您在不同设备和不同方向上测试站点

http://www.responsinator.com/

于 2013-04-24T15:30:13.973 回答
0

我建议找到允许您将浏览器调整为特定浏览器尺寸的浏览器插件。然后使用它设置常用尺寸...320px、480px、600px 等,和/或您的项目所需的任何尺寸。

对于 Chrome,我使用 Window Resizer。

于 2013-04-24T15:22:10.727 回答
0

我自己使用您描述的方法,它不是 100% 准确,某些文本大小可能会略有变化,特别是如果您使用 em 或 rems。如果测试盒子布局和类似的东西,它可能是相当准确的。

另一种解决方案是使用http://quirktools.com/screenfly之类的服务,这也是一个相对较好的解决方案。

我也使用的最佳解决方案是浏览器堆栈:http ://www.browserstack.com/ 但是它不是免费的。Browser Stack 还允许您测试不同的操作系统、不同的浏览器和多种不同的移动设备。

于 2013-04-24T15:23:33.803 回答
0

最好的方法是使用设备,但是,如果部分或所有设备不可用,那么您将不得不求助于其他一些(好的)工具。这里有一些例子 :

请记住,这些工具将向您展示像素完美的输出,并且用户交互/行为可能会有所不同。

于 2013-04-24T15:25:12.403 回答