调试响应式设计
Debug responsive design
如何调试响应式设计问题？如果一切正常，Chrome devTools 的可靠性如何？
我一直在使用 devTools，但是现在...我不再确定它到底有多好，因为我没有用于测试和比较的真实设备。例如，对于 Iphone 4 视口渲染中的首页 ( www.plantea.com.hr ) 似乎没问题，但在那个实际的移动设备上，页面宽度似乎没有设置为 100%，有填充或边距或右侧的东西，我不知道是什么导致了问题。此外，某些标题标签未正确显示 font-family.
同样的事情是，当我在 http://www.responsinator.com/?url=www.plantea.com.hr or http://mobiletest.me/ 等网站上查看时，一切似乎都很好，但实际上并非如此。
您尝试过仿真模式吗？转到开发工具，在放大镜旁边的顶部有一个看起来像 phone 的东西，单击它，您就进入了仿真模式。然后你可以在控制台下面select哪个设备。它可能并不完美，但可能会有所帮助。您还可以尝试 chrome 的附加组件，称为 Resolution Test。如果这不起作用，也许可以使用 browserstack.com
之类的服务
简而言之
有些事情可以使用开发工具来完成，但它不能替代在真实设备上进行测试。
没那么短
DevTools 尽最大努力测试 CSS 媒体查询之类的东西，它们会重新创建设备大小和触摸事件，但不会超出此范围。
下一步？
现在业界测试的选择很少：模拟器、虚拟机、BrowserStack 等测试服务。但是，虽然测试服务非常适合展示您网站的外观，但它们永远不如在实际设备上测试您的代码。
仿真器和测试服务比购买和维护您自己的设备实验室更有效，它们确实可以帮助您了解您的代码在不同平台上的行为方式，但它们并没有告诉您您需要了解的有关用户体验
进一步阅读
如何调试响应式设计问题？如果一切正常，Chrome devTools 的可靠性如何？
我一直在使用 devTools，但是现在...我不再确定它到底有多好，因为我没有用于测试和比较的真实设备。例如，对于 Iphone 4 视口渲染中的首页 ( www.plantea.com.hr ) 似乎没问题，但在那个实际的移动设备上，页面宽度似乎没有设置为 100%，有填充或边距或右侧的东西，我不知道是什么导致了问题。此外，某些标题标签未正确显示 font-family.
同样的事情是，当我在 http://www.responsinator.com/?url=www.plantea.com.hr or http://mobiletest.me/ 等网站上查看时，一切似乎都很好，但实际上并非如此。
您尝试过仿真模式吗？转到开发工具，在放大镜旁边的顶部有一个看起来像 phone 的东西，单击它，您就进入了仿真模式。然后你可以在控制台下面select哪个设备。它可能并不完美，但可能会有所帮助。您还可以尝试 chrome 的附加组件，称为 Resolution Test。如果这不起作用，也许可以使用 browserstack.com
之类的服务简而言之
有些事情可以使用开发工具来完成，但它不能替代在真实设备上进行测试。
没那么短
DevTools 尽最大努力测试 CSS 媒体查询之类的东西，它们会重新创建设备大小和触摸事件，但不会超出此范围。
下一步？ 现在业界测试的选择很少：模拟器、虚拟机、BrowserStack 等测试服务。但是，虽然测试服务非常适合展示您网站的外观，但它们永远不如在实际设备上测试您的代码。
仿真器和测试服务比购买和维护您自己的设备实验室更有效，它们确实可以帮助您了解您的代码在不同平台上的行为方式，但它们并没有告诉您您需要了解的有关用户体验