测试我的网站在不同设备中的显示方式

Question

我有一个nuxt.js网站，我注意到当我在朋友的手机上打开我的网站（华为的东西）时，图像没有显示并且看起来很破碎。

我的问题是：有没有办法测试我的webapp在不同设备上的外观？像travis这样的东西，但对于ui？

例如，我想测试我的网站在所有华为手机设备中都显示正常。有办法吗？就像获取每个这样的截图？也许是服务？

Answer 1

测试事物在移动设备上如何工作的最简单方法是使用F12 Developer Tools的响应模式（F12然后是CTRL + SHIFT + M）。这预装了一些常见的设备，但您可以添加自己的自定义尺寸。您可以从ScreenSiz.Es获取此常用设备屏幕尺寸的列表。

如果开发人员工具不会削减它，并且您需要查看设备在实际模拟手机上的外观，那么有免费网站可以模拟许多设备，例如MobileTest.Me。

如果你正在寻找更全面的东西，还有像BrowserStack这样的付费替代品（可以做截图和访问设备日志等事情）。

Answer 2

您观察到的不同设备和浏览器以不同方式呈现每个网页的原因是有原因的。要测试您的网站在不同设备上的外观，您可以执行以下操作：

1. 您可以使用像LambdaTest这样的跨浏览器测试平台，您可以在其中截取不同设备上的屏幕截图，也可以在各种设备上执行实时测试。

enter image description here

2. 如果您希望以不同的分辨率进行测试，那么您还可以直接在Chrome浏览器中使用工具进行测试。为此：

a）单击浏览器中的inspect元素或按键盘上的（Ctrl + Shift + I）。

b）单击选择元素和'Elements'enter image description here之间的Toggle Device图标

c）现在，您的网页视图将根据所选分辨率进行更改。您可以从列表中进行选择，也可以根据设备输入自定义分辨率。 enter image description here

如果这有帮助，请告诉我！