A responsive website is not a luxury but a necessity: more than 60% of traffic comes from mobile devices, and Google uses Mobile-First indexing. Let’s look at how to test responsiveness effectively and which tools to use.
What is responsive design?
Responsive design is an approach in which a website layout adapts to the screen size of the device. Unlike a “mobile version” (a separate URL), responsive design uses a single HTML file with CSS media queries.
The three pillars of responsive design:
- Flexible grid — widths in percentages, not pixels
- Flexible images —
max-width: 100% - Media queries — CSS applied under specific conditions
Viewport meta tag
The first step toward responsive design is setting the <meta name="viewport"> correctly:
<meta name="viewport" content="width=device-width, initial-scale=1">Without this tag, a mobile browser displays the page as if it were on a desktop (with a virtual width of 980px) and scales it down, making the text unreadable.
Common mistakes:
<!-- Плохо: запрещает масштабирование, нарушает доступность -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- Плохо: фиксированная ширина -->
<meta name="viewport" content="width=320">Breakpoints
Breakpoints are width thresholds at which the layout changes. Standard values commonly used in the industry:
| Name | Range | Devices |
|---|---|---|
| xs | < 480px | Small phones |
| sm | 480–767px | Phones |
| md | 768–1023px | Tablets |
| lg | 1024–1279px | Laptops |
| xl | 1280–1535px | Desktops |
| 2xl | ≥ 1536px | Wide screens |
In Tailwind CSS, this looks like:
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">In plain CSS:
.grid {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}Mobile-First vs. Desktop-First
Mobile-First — default styles are for mobile devices, and media queries extend them for larger screens (min-width). This is the recommended approach: performance is better, and the logic is simpler.
Desktop-First — default styles are for desktops, and media queries adapt them for smaller screens (max-width). Used when reworking older websites.
/* Mobile-First */
.sidebar { display: none; }
@media (min-width: 1024px) { .sidebar { display: block; } }
/* Desktop-First */
.sidebar { display: block; }
@media (max-width: 1023px) { .sidebar { display: none; } }Device presets for testing
Actual dimensions of popular devices that are important to test:
| Device | Width | Height |
|---|---|---|
| iPhone SE | 375px | 667px |
| iPhone 14 Pro | 393px | 852px |
| iPhone 14 Pro Max | 430px | 932px |
| Samsung Galaxy S23 | 360px | 780px |
| iPad Mini | 768px | 1024px |
| iPad Pro 12.9" | 1024px | 1366px |
| MacBook Air 13" | 1280px | 800px |
| Full HD | 1920px | 1080px |
Common responsiveness issues
Horizontal scrolling. Cause: a fixed-width element or negative margins. Diagnosis: overflow-x: hidden on body hides the problem but does not fix it. Find the cause using * { outline: 1px solid red }.
Text is too small on mobile. The browser automatically enlarges the font if it considers it too small. Disable this with: text-size-adjust: none (with vendor prefixes).
Tap targets are too small. According to Google’s recommendation, interactive elements should be at least 48×48px.
Images overflow their container. Add this globally: img, video { max-width: 100%; height: auto }.
Testing tools
- Browser DevTools — built-in device emulator (F12 → phone icon)
- BrowserStack, LambdaTest — real devices in the cloud
- Responsively App — displays several screen sizes at once
- reChecker Responsive Tester — quick browser-based testing with presets
Tool on reChecker
The reChecker responsive tester lets you check any URL at popular screen sizes: iPhone, Android, tablet, laptop, and Full HD — all in one interface. Switch between presets instantly and spot layout issues before publishing.