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

Question

我有一个nuxt.js网站，我注意到当我用朋友的电话（华为之类的东西）打开我的网站时，这些图像没有显示并且看上去很破损。

我的问题是：有什么方法可以测试我的Web应用在不同设备上的外观？就像travis一样，但用于ui？

例如，我想测试我的站点在所有华为电话设备中的显示情况是否正常。有办法吗？喜欢获取每个屏幕截图吗？也许是服务？

Answer 1

测试事物如何在手机上正常工作的最简单方法是使用F12 Developer Tools'响应模式（ F12 然后是 CTRL + SHIFT < / kbd> + M ）。它预装了很少的常见设备，但是您可以添加自己的自定义尺寸。而且，您可以从 ScreenSiz.Es 中获得此设备的常见屏幕尺寸尺寸列表。

如果开发者工具无法将其裁剪，并且您需要查看该设备在实际模拟手机上的外观，那么可以免费使用一些网站来模拟许多设备，例如 MobileTest.Me 。

如果您正在寻找更全面的信息，还可以使用诸如 BrowserStack 之类的付费选择（可以执行诸如截屏和访问设备日志之类的事情）。

Answer 2

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

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

enter image description here

1. 如果您要使用不同的分辨率进行测试，则可以与工具一起使用，也可以直接从Chrome浏览器中进行测试。为此：

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

b）单击选择元素和“元素”之间的切换设备图标 enter image description here

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

让我知道这是否有帮助！

Answer 3

您可以使用Chrome开发者工具在多个设备上以响应模式查看网站的外观。这些不是实际的设备，更像是模拟器，向您显示在不同屏幕尺寸下页面的外观。

还可以选择使用XCode的iOS模拟器或Android Studio的Android模拟器在模拟设备上运行浏览器。这更接近您的页面外观，但它仍在模拟设备上运行。

如果要在真实设备上进行测试，则要么必须创建自己的小型移动设备测试实验室，要么使用诸如TestingBot之类的服务，该服务可以在数据中心中托管多个物理设备，您可以用于检查您的网站。