I have a nuxt.js website and I noticed that when I open my site on a friend's phone (Huawei something) the images doesn't show and seem broken.
My question is: Is there any way to test how my webapp looks on different devices? Something like travis but for the ui?
For example I want to test that my site is shown fine in all Huawei phone devices. Is there a way to do so? Like get a screenshot for each of these? Maybe a service?
23 Answers
The simplest way to test how things would work on mobiles would be with the F12 Developer Tools' responsive mode (F12 then CTRL + SHIFT + M). This comes preloaded with a fair few common devices, but you can add your own custom dimensions. And you can get a list of common device screen size dimensions for this from ScreenSiz.Es.
If the Developer Tools won't cut it, and you need to see how the device looks on an actual emulated phone, there are free websites that can emulate a number of devices, such as MobileTest.Me.
And there are also paid alternatives like BrowserStack (which can do things like take screenshots and access device logs) if you are looking for something more comprehensive.
You can use the Chrome developer tools to see what your website looks like in responsive mode on several devices. These are not actual devices, more like emulators showing you what the page will look like on different screen sizes.
There's also the option to use XCode's iOS Simulator or Android Studio's Android Emulators to run a browser on an emulated devices. This comes closer to what your page will look like, but it's still running on an emulated device.
If you want to test on real devices, you either will have to create your own mini-mobile device test lab, or use a service such as TestingBot which hosts several physical devices in a datacenter, which you can use to check your website on.
There is a reason for what you've observed as different devices and browsers render every webpage differently. To test how your website is looking on different devices, you can do the following:
- You can use a cross browser testing platform like LambdaTest in which you can take screenshots on different devices as well you can perform live testing on various devices.
- If you're looking to test in different resolutions then along with a tool you can also do so directly from your Chrome Browser. To do so:
a) Click on inspect element in your browser or press (Ctrl+Shift+I) on your keyboard.
b) Click on the Toggle Device icon between select elements and 'Elements' enter image description here
c) Now the view of your web page will change according to the selected resolution. You can choose from the list or you can also enter your customized resolution according to the device. enter image description here
Let me know if this helps!
