This content originally appeared on DEV Community and was authored by Kingsley Ubah
When building websites, you have to keep in mind that many kinds of device are going to be viewing your site. These devices will come with different screen orientations.
Thus, making your website look good on mobile, tablets and desktop is vital.
You don’t need to use third party tools to test your website. Google Chrome comes with an in-built device simulator. You can select any of the devices and view how your page will look on that device. You can even add custom devices which are not included in the list.
Simulate a device on Chrome
Open the Chrome DevTool. You can do this by clicking on F12.
Alternatively, you can click on the three dots on the top right corner of your broswer window, select more tools and then developer tools.
Next, toggle the device view by click on the devices icon next to the elements tab.
Your page will be rendered into device mode. You will also notice the dropdown menu on top. From this drop down menu, you can select the device you want to emulate and view how you page will look on it.
The list of devices on the dropdown is limited. You can also edit the list to select and add other devices to the drop-down.
Adding custom devices
You can also create and add custom devices. To do so, click on the custom devices button.
You will need to input the height and width of your target device, as well as its pixel density.
You can find the screen resolution of any mobile device at this website .
You will also need to add a user agent string. A user agent string is a string of containing information about the computer requesting a web page.
This website has the user agent string for all common devices .
Finally you can add the device.
Now you will be able to emulate that device and test your web page on it.
Wrapping up
Device emulators are very good for responsive design. It's important to note that simulation in this case is just the visual part. The web browser does not run the operating system.
Don't forget to sign up for my newsletter!
This content originally appeared on DEV Community and was authored by Kingsley Ubah
Kingsley Ubah | Sciencx (2021-09-28T16:58:17+00:00) How to Emulate Devices on Google Chrome. Retrieved from https://www.scien.cx/2021/09/28/how-to-emulate-devices-on-google-chrome/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.