https://webmobileready.com/assets/blog.iphone-simulator-in-browser-Bkyx1tCy.js

1import{n as y}from"./rolldown-runtime-xSXa1GVp.js";import{B as j,D as v,R as k,l as P,p}from"./vendor-icons-tVGZ3zW1.js";import{r as S}from"./vendor-query-BVEPqhnh.js";import{c as N,l as O}from"./index-Cy7bmE2h.js";import{a as T,i as A,r as C}from"./SiteLayout-CNgi2hY1.js";import{t as M}from"./BlogPost-BO62Vwf-.js";var i=y(j(),1),e=S(),m=[{id:"iphone-15-pro",name:"iPhone 15 Pro",w:393,h:852},{id:"iphone-14",name:"iPhone 14",w:390,h:844},{id:"iphone-se",name:"iPhone SE",w:375,h:667}],u="https://example.com";function I(a){const t=a.trim();if(!t)return"";const s=/^https?:\/\//i.test(t)?t:`https://${t}`;try{const n=new URL(s);return n.protocol!=="https:"&&n.protocol!=="http:"?"":n.toString()}catch{return""}}function _(){const[a,t]=(0,i.useState)(u),[s,n]=(0,i.useState)(u),[r,x]=(0,i.useState)(m[0]),[f,d]=(0,i.useState)(0),[l,h]=(0,i.useState)(""),w=(0,i.useMemo)(()=>(r.w>360,1),[r]);function b(o){o.preventDefault();const c=I(a);if(!c){h("Enter a web address, like example.com");return}h(""),n(c),d(g=>g+1)}return(0,e.jsxs)("section",{id:"try-it","aria-labelledby":"try-it-heading",className:"mt-10 rounded-3xl border border-border bg-secondary/40 p-5 md:p-8 scroll-mt-24",children:[(0,e.jsx)("h2",{id:"try-it-heading",className:"text-2xl md:text-3xl font-bold",children:"Try an iPhone preview right here"}),(0,e.jsx)("p",{className:"mt-2 text-muted-foreground max-w-2xl",children:"Paste any web address, pick a model, and see it at a true iPhone viewport width — no install needed to look around."}),(0,e.jsxs)("form",{onSubmit:b,className:"mt-5 flex flex-col sm:flex-row gap-2 max-w-2xl",noValidate:!0,children:[(0,e.jsx)("label",{className:"sr-only",htmlFor:"preview-url",children:"Website address"}),(0,e.jsx)(C,{id:"preview-url",type:"text",inputMode:"url",autoComplete:"url",spellCheck:!1,maxLength:400,placeholder:"yourwebsite.com",value:a,onChange:o=>{t(o.target.value),l&&h("")},className:"h-11"}),(0,e.jsxs)(A,{type:"submit",size:"lg",children:[(0,e.jsx)(p,{className:"h-4 w-4"})," Preview"]})]}),l&&(0,e.jsx)("p",{className:"mt-2 text-xs text-destructive",role:"status",children:l}),(0,e.jsxs)("div",{className:"mt-5 flex flex-wrap items-center gap-2",children:[m.map(o=>(0,e.jsx)("button",{type:"button",onClick:()=>x(o),"aria-pressed":r.id===o.id,className:`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${r.id===o.id?"border-primary bg-primary text-primary-foreground":"border-border bg-background text-muted-foreground hover:text-foreground"}`,children:o.name},o.id)),(0,e.jsxs)("span",{className:"text-xs text-muted-foreground ml-1",children:[r.w," × ",r.h]}),(0,e.jsxs)("button",{type:"button",onClick:()=>d(o=>o+1),className:"ml-auto inline-flex items-center gap-1 rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground",children:[(0,e.jsx)(P,{className:"h-3.5 w-3.5"})," Reload"]})]}),(0,e.jsx)("div",{className:"mt-6 flex justify-center",children:(0,e.jsxs)("div",{className:"relative rounded-[2.75rem] border-[10px] border-neutral-900 bg-neutral-900 shadow-2xl overflow-hidden",style:{width:r.w,height:r.h,maxWidth:"100%",transform:`scale(${w})`,transformOrigin:"top center"},children:[(0,e.jsx)("div",{className:"absolute left-1/2 top-2 z-10 h-6 w-24 -translate-x-1/2 rounded-full bg-neutral-900"}),(0,e.jsx)("iframe",{src:s,title:`Website preview on ${r.name}`,loading:"lazy",referrerPolicy:"no-referrer",sandbox:"allow-scripts allow-same-origin allow-forms allow-popups",className:"h-full w-full rounded-[2rem] bg-white",style:{border:0}},`${s}-${r.id}-${f}`)]})}),(0,e.jsxs)("p",{className:"mt-5 text-sm text-muted-foreground text-center max-w-2xl mx-auto",children:["Nothing showing? Plenty of sites — banks, Google, most logged-in dashboards — refuse to be embedded in another page. The extension has no such limit because it frames your own tab."," ",(0,e.jsxs)("a",{href:s,target:"_blank",rel:"noopener noreferrer nofollow",className:"inline-flex items-center gap-1 text-primary hover:underline",children:["Open this page in a tab ",(0,e.jsx)(v,{className:"h-3.5 w-3.5"})]})]})]})}function B(){return(0,e.jsxs)(M,{tag:"iOS",slug:"/blog/iphone-simulator-in-browser",title:O,lede:"You don't need a MacBook, Xcode, or a $999 spare phone to see how your site looks on iOS. An iPhone simulator can run right inside the browser you already have open — in about fifteen seconds.",image:N,imageAlt:"MacBook Pro on a wooden desk running the MobileReady iPhone simulator in Chrome — a single iPhone 15 frame previewing google.com/store, with a coffee mug and leather notebook 

1nearby",date:"Apr 22, 2026",read:"7 min read",topActions:(0,e.jsxs)("div",{className:"flex flex-wrap items-center gap-3",children:[(0,e.jsxs)("a",{href:"#try-it",className:"btn-primary inline-flex items-center gap-2",children:[(0,e.jsx)(p,{className:"h-4 w-4"})," Try it now"]}),(0,e.jsxs)("a",{href:T("blog_iphone-simulator-in-browser"),target:"_blank",rel:"noopener noreferrer",className:"btn-ghost inline-flex items-center gap-1",children:["Add to Chrome ",(0,e.jsx)(k,{className:"h-4 w-4"})]})]}),afterHero:(0,e.jsx)(_,{}),children:[(0,e.jsx)("p",{children:`Let's be blunt about what people mean when they search for an "iPhone simulator online". Most of the time it's not an iOS developer looking to sideload an .ipa file. It's a web designer, a marketer, or a freelancer who needs to know whether their landing page looks right on an iPhone before hitting publish. This guide is for them.`}),(0,e.jsx)("h2",{children:"Quick answer"}),(0,e.jsxs)("p",{children:["The fastest iPhone simulator for websites is a browser extension. Install"," ",(0,e.jsx)("a",{href:"/download",children:"MobileReady"}),", click the icon, choose an iPhone model, and your current tab renders inside a realistic iPhone frame at the correct viewport width — on Windows, macOS, or Linux. No Xcode, no cloud queue, no account."]}),(0,e.jsx)("h2",{children:"The three kinds of iPhone simulator"}),(0,e.jsx)("h3",{children:"1. Apple's iOS Simulator (from Xcode)"}),(0,e.jsx)("p",{children:"The real deal — runs iOS in a virtual machine on macOS, including Safari, the home screen and settings. It's what iOS app developers use before pushing to TestFlight."}),(0,e.jsxs)("p",{children:[(0,e.jsx)("strong",{children:"Downsides:"})," Mac-only, a 7 GB+ Xcode download, slow to boot, and total overkill if you only want to look at a webpage. Safari inside the simulator also behaves subtly differently from Safari on a real iPhone. Great for app developers, wrong tool for everyone else."]}),(0,e.jsx)("h3",{children:"2. Online iPhone emulators (Appetize.io and friends)"}),(0,e.jsx)("p",{children:"Cloud services stream a real iOS simulator into your browser tab. It genuinely works, but sessions are laggy, free tiers cap you at a few minutes, and you have to paste your URL in every time. Fine for a one-off check, painful for daily work."}),(0,e.jsx)("h3",{children:"3. Browser extensions that simulate iPhone rendering"}),(0,e.jsxs)("p",{children:["This is what most people actually want. A tool like"," ",(0,e.jsx)("a",{href:"/download",children:"MobileReady"})," installs into Chrome, Firefox or Microsoft Edge and wraps any tab in an iPhone frame — Dynamic Island, correct viewport width, realistic status bar, touch-style scrolling. Safari support is coming soon. It isn't booting iOS in a VM, but for previewing web pages it doesn't need to: the rendering happens in your browser and the frame plus viewport make it behave like an iPhone."]}),(0,e.jsx)("h2",{children:"How to simulate an iPhone on Windows or a PC"}),(0,e.jsx)("p",{children:"This is the most common blocker, and the answer is simple: because the extension approach runs inside your desktop browser, the operating system underneath doesn't matter. A Windows 11 laptop, a Chromebook or a Linux desktop all get the same iPhone frames a Mac does. Apple's own simulator is the only option that requires macOS."}),(0,e.jsxs)("ol",{children:[(0,e.jsx)("li",{children:"Install a mobile simulator extension in Chrome, Edge or Firefox."}),(0,e.jsx)("li",{children:"Open your site in a new tab."}),(0,e.jsx)("li",{children:"Click the extension icon."}),(0,e.jsx)("li",{children:'Pick "iPhone 15 Pro" — or whichever model your audience actually carries.'}),(0,e.jsx)("li",{children:"Scroll, tap the CTA, fill out a form. Look at the real thing."})]}),(0,e.jsxs)("p",{children:[`That's roughly fifteen seconds from "I need to check this" to actually checking it. If you also need Android, the same panel holds Pixel and Galaxy frames — see our`," ",(0,e.jsx)("a",{href:"/blog/best-mobile-emulator-for-chrome",children:"mobile emulator comparison"}),"."]}),(0,e.jsx)("h2",{children:"Is a browser-based iPhone simulator accurate?"}),(0,e.jsx)("p",{children:'For the vast majority of websites, the difference between "Safari on iOS" and a desktop browser at an iPhone viewport is nothing you can see. Both respect the same viewport meta tag, both wrap text at the same width, both apply the same CSS box model. The visual layout is identical.'}

1),(0,e.jsxs)("p",{children:["Where they differ is edge cases: ",(0,e.jsx)("code",{children:"-webkit-"})," prefixes, iOS Safari's"," ",(0,e.jsx)("code",{children:"100vh"})," weirdness, Apple Pay, some scroll and sticky-header behaviors. If your site leans on those, you'll eventually want a real iPhone or the full iOS Simulator. For a marketing site, a portfolio, or a SaaS dashboard, the extension gets you 98% of the way there in one click."]}),(0,e.jsx)("h2",{children:"Which iPhone models should you test?"}),(0,e.jsxs)("ul",{children:[(0,e.jsxs)("li",{children:[(0,e.jsx)("strong",{children:"iPhone 15 / 15 Pro (393×852)"})," — today's mainstream width."]}),(0,e.jsxs)("li",{children:[(0,e.jsx)("strong",{children:"iPhone 14 Pro Max (430×932)"})," — the widest common iPhone."]}),(0,e.jsxs)("li",{children:[(0,e.jsx)("strong",{children:"iPhone SE (375×667)"})," — the narrow, short screen that breaks layouts first. If your page survives here, it survives everywhere."]}),(0,e.jsxs)("li",{children:[(0,e.jsx)("strong",{children:"iPad Air (820×1180)"})," — the in-between size most sites forget."]})]}),(0,e.jsx)("p",{children:"Testing the narrowest and widest device in your range catches nearly every responsive bug worth catching."}),(0,e.jsx)("h2",{children:"When you still need a real iPhone"}),(0,e.jsx)("p",{children:"Simulators are for design and layout. Physical devices are for:"}),(0,e.jsxs)("ul",{children:[(0,e.jsx)("li",{children:"Touch feel — how buttons respond to a fingertip, not a mouse click."}),(0,e.jsx)("li",{children:"iOS Safari quirks — sticky headers, viewport height, address-bar hide/show."}),(0,e.jsx)("li",{children:"Font rendering — iOS smooths type differently than any desktop browser."}),(0,e.jsx)("li",{children:"Performance — a three-year-old iPhone SE is not your M3 MacBook."}),(0,e.jsx)("li",{children:"Anything talking to iOS itself — Apple Pay, Add to Home Screen, push notifications."})]}),(0,e.jsx)("p",{children:"If none of those apply to your project, a browser-based iPhone simulator is genuinely all you need. Stop feeling guilty about not owning every device Apple has ever shipped."}),(0,e.jsx)("p",{children:"Viewport simulation does not replace final testing on physical devices or in Safari/WebKit."}),(0,e.jsx)("h2",{children:"Common questions"}),(0,e.jsx)("h3",{children:"Is there a free iPhone simulator online?"}),(0,e.jsx)("p",{children:"Yes. MobileReady's free tier covers the core iPhone, iPad and Android frames with no account and no card. Cloud emulators like Appetize also have free session minutes, and Apple's iOS Simulator is free with Xcode on a Mac."}),(0,e.jsx)("h3",{children:"Can I run an iPhone simulator without a Mac?"}),(0,e.jsxs)("p",{children:["For websites, yes — a browser extension or a cloud emulator both work on Windows and Linux. For testing native iOS ",(0,e.jsx)("em",{children:"apps"}),", you still need macOS or a paid cloud device farm."]}),(0,e.jsx)("h3",{children:"How is this different from Chrome DevTools device mode?"}),(0,e.jsxs)("p",{children:["DevTools resizes the viewport but shows no device frame, no realistic status bar, and no quick model switching for client demos. We wrote a full"," ",(0,e.jsx)("a",{href:"/blog/mobileready-vs-chrome-devtools",children:"MobileReady vs Chrome DevTools"})," ","comparison if you want the details."]}),(0,e.jsx)("h3",{children:"Can I test a page running on localhost?"}),(0,e.jsxs)("p",{children:["Yes — the extension simulates the tab you're already on, including"," ",(0,e.jsx)("code",{children:"localhost:3000"}),". For checking a dev server on an actual handset, see"," ",(0,e.jsx)("a",{href:"/blog/test-localhost-on-mobile",children:"how to test localhost on a real mobile device"}),"."]}),(0,e.jsx)("h2",{children:"The bigger picture"}),(0,e.jsx)("p",{children:"The web has been mobile-first for years. Being able to preview any page on any phone in one click isn't a nice-to-have anymore — it's table stakes. Whether you get there with MobileReady, DevTools, or a shelf of test devices, the important thing is that you're actually looking. Ship less code that only ever got tested on the monitor you built it on."})]})}

1export{B as component};