Simulate different devices and screen sizes

There is a great mode in all major browser developer tools that makes it really easy to test your webpage under different screen sizes and even simulate other devices.

To enable it:

• In Chrome:

  In DevTools, click Toggle Device Toolbar or press Ctrl+Shift+M (or Cmd+Shift+M on macOS).

• In Edge:

  In DevTools, click Toggle device emulation or press Ctrl+Shift+M (or Cmd+Shift+M on macOS).

• In Firefox:

  • You can do it even without opening DevTools: go to Application menu > More tools > Responsive design mode, or press Ctrl+Shift+M (or Cmd+Shift+M on macOS).
  • Or, if you're in DevTools, click Responsive Design Mode, or press Ctrl+Shift+M (or Cmd+Shift+M on macOS).

• In Safari:

  In the Develop menu bar item, click Enter Responsive Design Mode, or press Ctrl+Command+R.

• In Polypane:

  This is the default mode in Polypane. Unique to Polypane is that it allows you to see multiple different sizes side-by-side.

  

When enabled, you can:

• Resize the screen size by hand.
• Choose one of the pre-defined devices to simulate. Note: this option only simulates the screen size, user agent string, and touch events (when necessary), but doesn't render the page like the real device would. Always test your webpage with the real device too.
• Create your own simulated devices.
• Capture screenshots.
• Throttle the network speed to test your website on slower connections.
• And more.