Test Website on Different Screen Resolutions
Checking a layout across real viewport widths is a common part of building responsive web designs. It's important to see exactly how your designs look in different resolutions, with the ultimate goal being to create a flexible layout that works well for any screen.
Why You Don’t Need a Device Lab to See Real Layout Problems
You don't need a massive device lab to see how your website looks on the most popular screen sizes. The modern browsers you already have work just fine: DevTools, in the rendering engine of a browser, provides quite accurate rendering of webpages, and browser vendors recommend using its built-in modes for this purpose.
Browsers like Chrome and Firefox include responsive design mode – a special mode that allows you to resize your browser and reload your web page to see what happens. To be more precise, Chrome DevTools has a device toolbar which allows you to toggle specific settings: any device's screen width, aspect ratio, and device pixel ratio. You can use it to open the responsive mode and check out your page on different devices.
There are also browser extensions to check how the website may display, and what isn't working well on specific devices. Responsive Preview, for example, will show you multiple preview layouts on one responsive dashboard: you click its icon on the top right side of your browser, and it shows you responsive previews in a different tab.
The Core Responsive Viewport Ranges You Must Cover
While different sources might call different widths'canonical', you will find that the following are the most common ones to consider:
Small phones (portrait): 320–479px
These breakpoints are one of the most commonly used according to data gathered over the years: 480px breakpoint especially is widely used.
Large phones (landscape), small tablets: 480–767px
A very common phone screen size today is 375px x 667px.
Tablets (portrait and landscape): 768–1023px
Tablets around a 1024px width are common targets.
Desktop screens: 1024px and up
Chrome DevTools lets you specify more varied resolutions, and has a "custom" button in the responsive design mode, which sits next to the preset devices. Some of the commonly popular widths include 1366px wide, 1440px wide, and 1920px wide.
Using Browser DevTools to Walk Through These Viewports
To use a browser's built‑in tools to test your layout, you just need to know a way to open and use the responsive design mode.
In Chrome, open DevTools, and you will see a new toolbar on the top of the browser:
The new toolbar has several options.
Turn on device mode to toggle responsive mode. You can use the drop‑down menu to decide at what device and screen size you would want to test. You can see a preview of what you would specifically see at these common breakpoints.
The most popular preset devices are: iPhone, iPad, desktop, etc.
Supplementing Browser Tools with Online Resolution Simulators
Browser DevTools, in addition to browser extensions, is a very powerful, very flexible way to do a lot of checking, editing, and testing. But when the documentation focuses on building out responsive design, and you're not working with those built tools, you may need a little more help.
There are also quite a number of online simulators, which work by letting you paste your website's URL, and view it at a selected resolution. You won't get the same branding if you do this as if you are custom building in DevTools, but if you are just pushing the width of a column, you may not actually need to be that exact.
One of the most popular tools for doing this is screensize.io. It is a very straightforward tool, and takes your URL, shrinks it, pops it up, and lets you view where you are selecting.
The simulation is reported to be quite accurate, if not full fidelity, and not taking into effect any customizations to fonts, colors, or display settings.
Other device testing tools include Screenfly, which allows you to specify resolution, like screensize.io, and lets you test various screen resolutions.
From here, you can use your screenshots, make any adjustments you see fit, and end up with a responsive website, optimized for responsive design.
Building Your Own Four-Viewport Routine from Real Breakpoints
These core viewport ranges are the ones that strike an important balance, according to sources, of being widely useful without being exhaustive. They align with the breakpoints most responsive designs already account for, and the resolutions most common around the world according to global usage surveys.
What this means is that if you were to use just four widths, hitting one in each of these ranges would let you test for most responsive issues:
- A small phone breakpoint, such as 375px – which is one of the most common device screen widths now
- A tablet breakpoint, such as 768px or 1024px – which targets the most common tablets and older laptops
- A large desktop breakpoint, such as 1536px – which would catch the largest breakpoints used in good responsive designs today
3.
This approach gives you a compact, efficient testing routine that matches the breakpoints responsive design already expects, while still letting you reliably catch the most common layout bugs – as long as you know what issues to look for at each breakpoint.