How to check Responsive Websites in Chrome

Chrome’s Responsive Design Mode allows you to simulate websites on different device screen sizes, orientations, and pixel densities (DPR). This lets you identify how your website adapts visually and interactively, ensuring an optimal user experience for all devices. Testing responsiveness in Chrome is a crucial step in modern web development and design.

To check the responsiveness of websites in Chrome:

1. Open Google Chrome and navigate to the website you want to test.

2. Right-click on the webpage and select Inspect

3. Click the Toggle Device Toolbar icon on the top next to the Elements tab

4. Choose Responsive and select the device. You can also manually adjust the viewport size.

5. Click, scroll, or pinch (using mouse gestures) to simulate how users interact on mobile devices.

6. You can use the Rotate option to rotate the screen and view it in landscape/portrait mode.

7. Click the Custom dropdown at the top and select the necessary options to simulate slow connections like 3G or 4G.

8. Click the ellipsis icon > Add devices pixel ratio to enable it. Select the necessary option:

• Standard Displays, that is each CSS pixel corresponds to exactly one physical (device) pixel. Example: Older desktop monitors
• High-Density Displays, that is, each CSS pixel is mapped to 2×2 physical pixels (4 total pixels). Example: Retina displays
• Very High-Density Displays, that is each CSS pixel maps to 3×3 physical pixels (9 total pixels). Example: High-end phones

9. Click X to close.

If you are a tester or a developer and want to test on real devices, you can use BrowserStack Live. BrowserStack offers a real device cloud platform and allows you to seamlessly test your mobile apps and web applications on 3500+ different devices, browsers, and OS versions, ensuring maximum test coverage.

Talk to an Expert