Responsive design allows you to build sites that look great on the phone as well as on your desktop. But how do you test your design across devices?
When creating a website, you need to be responsive and adaptable to different screen sizes. One way to test this is to use Google Chrome’s built-in developer tools.
DevTools also has the option to preview your website on a variety of devices. This includes different types of mobile devices, iPads, tablets and more.
To open the device toolbar in Google Chrome Chrome developer tools window:
- Open the website.
- Right-click on the page and click inspect..
- The ChromeDevTools window opens. It may open next to or below your browser, or as a new window.
- At the top left of the window are two icons. Click the icon that indicates multiple devices of different sizes.
- The screen changes to show how your website will look on your mobile device.
How to switch between different devices
Use the dropdown at the top of the device toolbar to switch between different devices.
- At the top of the toolbar, you can see the type of device that is currently viewing your website. Click the dropdown and select another device from the list.
- Instead of selecting an existing device, you can choose to view the website in response mode. Click the dropdown and Responsive option.
- Next to the dropdown, you can also enter a custom width and height for your device.
- Instead of entering the width and height, you can also click and drag the corners of the window to adjust the size.
How to add a custom device
If you want to save your custom width and height, you can add a custom device. The device toolbar shows the new device in the device dropdown.
- Click the dropdown to list all devices.
- click edit..
- [設定]In the sidebar, device The tab is selected. You can also see a list of other devices you can select here.
- click Add a custom device..
- Enter the device name, width, and height. Also select the device type, such as mobile device or desktop device.When unfolded User agent client tips You can optionally add other details such as device model, brand, version, etc.
- click addition..
- You will be returned to the dropdown that lists all devices. The new custom device appears in the list.
- You can re-edit these details later by returning to the custom device page.Please click edit Click the button next to the device name to start editing.
For several reasons, it’s very useful to be able to preview your website on different devices and screen sizes.
First, you can test your website’s performance on a variety of devices. Some mobile phones may have faster network speeds and CPU throttling than other mobile phones.
You can use the device toolbar to switch between different network speed options. This allows you to test the speed of calls to the server and test the loading and rendering of data on your website.
In addition, from a UI perspective, you can also see what your design will look like on a particular device.If you are using CSS media queriesYou can use this tool to verify that it is working as expected.
You can use Google Chrome’s DevTools window to test how your website adapts to different screen sizes and see how responsive your website is. You can also use it to test the performance of your website and to test whether media queries are working as expected.
You can also use Google Chrome’s DevTools for other purposes.[要素]Of the window[スタイル]You can use it to debug CSS issues by modifying the CSS on the tabs. This allows you to view CSS changes immediately, speeding up your coding workflow.
How to debug CSS using Google Chrome