Details
You can simulate different screen sizes in your browser so you can see what your web page looks like on a phone or tablet.
The way you simulate the different phone screens varies depending on which browser you’re using. Use the following steps for each browser below:
- Chrome: In the Developer Tools pane there is a phone/tablet icon next to the Elements tab. Click the icon to toggle the device toolbar. From here you can select different devices.
- Firefox: In the Developer Tools pane there is a phone/tablet icon near the close button. Click the icon to toggle the device toolbar. From here you can select different devices. You can also click the hamburger menu icon and go to Web Developer > Responsive Design Mode.
- Safari (macOS only): In the menu bar, go to Develop > Enter Responsive Design Mode.
Exercises
Open example.com in a new tab. Then open up your browser dev tools. Then try simulating different screen sizes.
References
View Source from MDN