Google Chrome has a pretty nifty emulator tool that enables better website development by emulating the different devices that you would want to test your websites on.
A few keys points about the emulator that makes it unique and much better for development than merely stretching your browser window to various sizes:
- Chrome’s minimum browser width (400px) is still wider than the smallest device size (320px iPhone 3/4)
- Using the emulator tool also changes the
user agentvariable in Chrome so that it thinks and acts as if it were the actual device it is emulating
- The emulator shows a grid and rulers with pixel dimensions behind the device window
How to use the Chrome Emulator?
- Open the Element Inspector (right-click “Inspect Element”)
- Click on the mobile device icon in the upper-left corner of the Element Inspector (see screenshot)
- Select the device you wish to emulate from the dropdown menu at the top (see screenshot)
- Tip: Refresh the page for proper
user agentspoofing and viewport rendering