html - 使用 chrome 检查响应式设计

Question

我有一个带有 svg 背景和表格的网页。背景分为 2 个部分。

顶部区域 - 背景图片/底部区域 - 背景颜色

某些移动设备出现问题，底部背景出现在像这样的树后面。

我已经通过编写媒体查询解决了这个问题。之后我通过 chrome 设备模拟器检查了主要设备的响应兼容性。一切都很好。但是我的客户向我提示说他的设备出现了背景问题。(microsoft surface pro 4) 然后我回到 chrome 设备模拟器并将自定义设备添加为 surface pro 4 并设置实际分辨率。(2736x1824) 但它正在显示在 chrome 工具上很好。 (pc) 这是我的设置。

我因为没有设置设备像素比而收到此错误？或任何其他正确检查移动兼容性的方法？

Answer 1

有很多插件可用于在我使用的相应设备上测试响应式网站，您可以试试这个插件

• 响应式网页设计测试员 - chrome
• 切换响应式 - Mozilla

只需搜索此插件并单击相应浏览器上的添加插件按钮搜索相应的插件。