How does your website look on mobile devices
Have you ever wondered what your website looked like on a clients device? More and more online customers are using their smart phones & tablets to view websites content. With this in mind, website developers must spend more time testing the site on an increasingly growing range of devices and phones to ensure content compatibility. Thankfully this task is made much easier with the use of the Google Chrome Dev Tools Device Mode. This great little feature allows you to quickly explore:-
- Different screen sizes and resolutions. Get a true indication of what your customers see.
- Run tests on a live website to evaluate your websites speed and performance.
- Simulate device input for touch events and simulate different orientations.
How do I turn on Emulation Mode?
- Go to Menu > View > Developer > Developer Tools
- Click on the Cog icon near the right-hand side of the DevTools menu bar
- Click on the “Overrides” tab
- Tick the checkbox for – Show ‘Emulation’ view in console drawer
- Close the settings
The image on the right shows what you will see when you have successfully enabled the emulation mode (eg. for Apple Iphone 4). Using the drop-down menu and the Landscape portrait option you can quickly toggle between the most popular devices.
The emulation screen allows you to change the resolution to a custom size.