Guides

Install the Mobile Preview extension, start your dev server and open the panel: your localhost appears in an iPhone frame next to your code, with live reload. Step by step.

Cursor and Windsurf are VS Code based editors that install extensions from Open VSX. Mobile Preview is published there: install it and see your app on phone and tablet frames beside your AI-written code.

Chrome DevTools device mode emulates touch, throttling and user agents in the browser. Mobile Preview keeps a device frame beside your code in VS Code. When to use each, honestly.

Run your Next.js dev server (npm run dev, port 3000) and open Mobile Preview: your app appears in an iPhone, Android or iPad frame next to your code and reloads on save.

Run your Vite (React, Vue, Svelte) dev server (npm run dev, port 5173) and open Mobile Preview: your app appears in an iPhone, Android or iPad frame next to your code and reloads on save.

Run your Nuxt dev server (npm run dev, port 3000) and open Mobile Preview: your app appears in an iPhone, Android or iPad frame next to your code and reloads on save.

Run your Astro dev server (npm run dev, port 4321) and open Mobile Preview: your app appears in an iPhone, Android or iPad frame next to your code and reloads on save.

Run your SvelteKit dev server (npm run dev, port 5173) and open Mobile Preview: your app appears in an iPhone, Android or iPad frame next to your code and reloads on save.

Run your Angular dev server (ng serve, port 4200) and open Mobile Preview: your app appears in an iPhone, Android or iPad frame next to your code and reloads on save.

Run your Remix and React Router dev server (npm run dev, port 5173) and open Mobile Preview: your app appears in an iPhone, Android or iPad frame next to your code and reloads on save.

Run your Gatsby dev server (npm run develop, port 8000) and open Mobile Preview: your app appears in an iPhone, Android or iPad frame next to your code and reloads on save.

Run your Storybook dev server (npm run storybook, port 6006) and open Mobile Preview: your app appears in an iPhone, Android or iPad frame next to your code and reloads on save.

Run your Laravel dev server (php artisan serve, port 8000) and open Mobile Preview: your app appears in an iPhone, Android or iPad frame next to your code and reloads on save.

What <meta name="viewport"> does, why a page looks tiny on a phone without it, and the line to use. With the options that matter and the ones to avoid.

On phones, 100vh can be taller than the visible area because of the browser address bar. Use dvh (or svh) units instead. Examples and what to check.

Use viewport-fit=cover and env(safe-area-inset-top) so fixed headers and bottom bars are not hidden by the notch, the Dynamic Island or the home indicator.

Tailwind’s default breakpoints are 640, 768, 1024, 1280 and 1536 pixels. Here is where popular phones and tablets fall in portrait and landscape, and what to test.

AI assistants write good desktop layouts and often miss phones. A 10-point checklist of what breaks first on a narrow screen, and how to check each point quickly.

Export your page inside an iPhone or Android frame as a PNG, with a transparent or solid background at 2x or 3x. For READMEs, Product Hunt, portfolios and store listings.