Blog
Guides on mobile view testing, responsive design and Chrome tips from the Mobile View Extension team.
Chrome extensions for web developers worth installing
Chrome extensions for web developers that fill real gaps in DevTools: framework devtools, accessibility checkers, inspectors, mobile view and safety tips.
Read article →Bootstrap responsive design: breakpoints and grid explained
Bootstrap 5 breakpoints, container widths and responsive grid classes, plus Sass mixins, display utilities and how to customise and test them.
Read article →How to change the user agent in Chrome (without an extension)
Change the user agent in Chrome without an extension: DevTools Network conditions, device mode, client hints, a launch flag and Playwright.
Read article →Chrome web developer tools (DevTools): a practical guide
A practical guide to Chrome's web developer tools: how to open DevTools, what each main panel does, and the shortcuts that save the most time.
Read article →Chrome mobile emulator: how to use DevTools device mode
Step-by-step guide to Chrome's built-in mobile emulator: open device mode, pick or add devices, throttle network and CPU, emulate touch and take screenshots.
Read article →Cross-browser testing: a practical checklist and free tools
How to test a website on different browsers on a small budget: which browsers to cover, what to check, and free tools like Playwright.
Read article →CSS media queries explained, with mobile examples
CSS media queries explained: syntax, min-width vs max-width, the range syntax, features for mobile, dark mode and touch, and common mistakes.
Read article →Google Mobile-Friendly Test is gone: what to use instead
Google retired its Mobile-Friendly Test in December 2023. These free tools replace it, and here is a 10-minute routine to check a page today.
Read article →How to make a website mobile friendly: 10 fixes that matter
The ten changes that make a website mobile friendly, from the viewport tag and fluid layouts to tap targets, forms and image sizes, with code you can copy.
Read article →Responsive design tester: how to test responsive design and find real bugs
A step-by-step method for checking the responsiveness of a website: the width sweep, device checks, content stress tests, zoom and automated screenshots.
Read article →iPhone screen sizes and viewport sizes: the complete chart
Every iPhone from the SE to the iPhone 18 Pro Max: screen size in inches, resolution in pixels, CSS viewport size and pixel ratio, with notes for web designers.
Read article →Lighthouse in Chrome: mobile audit with DevTools or the extension
Run a Lighthouse mobile audit in Chrome DevTools, the Lighthouse extension or the command line: settings, reading scores, why results vary, what to fix first.
Read article →How to make a WordPress site mobile friendly
Step-by-step fixes for WordPress sites that look wrong on phones: theme choice, block and page builder settings, menus, images, plugins and testing.
Read article →Mobile-first design: what it is and how to apply it
What mobile-first design means for content, layout and CSS, how it differs from desktop-first, a worked CSS example and common mistakes.
Read article →Mobile page speed test: how to measure and improve it
How to run a mobile website speed test that means something: field vs lab data, Core Web Vitals thresholds, free tools and the fixes that work.
Read article →How to take a mobile screenshot of a website on desktop
Capture a phone-sized screenshot of any web page from desktop Chrome: visible area or full page, with or without a device frame.
Read article →Mobile simulator Chrome extension vs DevTools: which to use
How mobile simulator extensions for Chrome differ from DevTools device mode, what each one emulates, and how to pick the right tool for mobile checks.
Read article →Mobile website testing checklist: 30 checks before launch
A practical checklist for testing a website on mobile: layout, navigation, forms, media, speed, SEO and accessibility, with the tool to use for each check.
Read article →Breakpoints for responsive design: common values and how to choose
Common CSS breakpoints for mobile, tablet and desktop, how Tailwind, Bootstrap and Material compare, and how to choose breakpoints from content.
Read article →Tailwind responsive design: breakpoints and media queries
How responsive design works in Tailwind CSS v4: default breakpoints, mobile-first prefixes, max and range variants, custom breakpoints and testing.
Read article →How to test a localhost website on mobile (phone and mobile view)
Open a local development site on a real phone or in a mobile view: LAN IP and --host, Chrome port forwarding, tunnels, emulator addresses, and common fixes.
Read article →Android emulator for browser testing: how to test a website on Android
Test a website on Android Chrome from your computer: Chrome mobile views, the Android Studio emulator and remote debugging a real phone.
Read article →How to test a website on iPhone without an iPhone
Test a website on iPhone Safari without an iPhone: Xcode Simulator, Safari Web Inspector, WebKit in Playwright and cloud devices.
Read article →User agent switcher: what it does and when you need one
What a user agent switcher changes, why it alone does not give you a mobile view, how client hints fit in, and how to pick a safe extension.
Read article →How to view the mobile version of a website on desktop
Four ways to open the mobile version of any website on a desktop computer, what each method really shows, and which one to use for a quick check.
Read article →How to view a website as an iPad or tablet in Chrome
Three ways to see a website at tablet size in desktop Chrome, current iPad viewport sizes, and why iPad Safari often gets your desktop layout.
Read article →Mobile viewport meta tag: what to use and why
What the mobile viewport meta tag does, the one line every page needs, values to avoid, and newer options like viewport-fit and interactive-widget.
Read article →Why your website looks different on mobile (and how to fix it)
Eleven reasons a website looks different on a phone than on desktop, from missing viewport tags and caching to dark mode and Safari quirks.
Read article →What is responsive web design? Principles and examples
Responsive web design explained: where it came from, core principles, responsive vs adaptive design, modern CSS techniques and testing.
Read article →What is viewport size? How to check yours and why it differs
Viewport size explained: CSS pixels vs screen resolution, pixel ratio, layout vs visual viewport, mobile viewport units and how to check yours.
Read article →
View your next website as mobile.
Add the mobile view Chrome extension and open device previews for the tab you are already working in.