css - 调试响应式设计

Question

如何调试响应式设计问题？如果一切正常，Chrome devTools 的可靠性如何？

我一直在使用 devTools，但现在...我不再确定它到底有多好，因为我没有用于测试和比较的真实设备。例如，对于 Iphone 4 视口(viewport)渲染上的首页 ( www.plantea.com.hr ) 似乎没问题，但在那个实际的移动设备上，页面宽度似乎没有设置为 100%，有填充或边距或其他东西在右侧，我不知道是什么导致了问题。此外，某些标题标签未显示正确的字体系列。

同样的事情是当我查看像 http://www.responsinator.com/?url=www.plantea.com.hr 这样的网站时或 http://mobiletest.me/一切似乎都很好，但实际上并非如此。

Answer 1

简而言之

有些事情可以使用开发工具来完成，但它不能替代在真实设备上进行测试。

没那么短

DevTools 尽最大努力测试 CSS 媒体查询之类的东西，它们会重新创 build 备大小和触摸事件，但它们不会超出此范围。

下一步？现在业界测试的选择很少:模拟器、虚拟机、测试服务，如 BrowserStack .但是，尽管测试服务非常适合展示您网站的外观，但它们永远不如在实际设备上测试您的代码。

模拟器和测试服务比购买和维护您自己的设备实验室更有效，它们确实可以帮助您了解您的代码在不同平台上的行为方式，但它们不会告诉您您需要了解的有关用户体验的所有信息。

进一步阅读

• Prioritizing Devices: Testing And Responsive Web Design