Device Release Blog

The iPhone 18 Pro and iPhone 18 Pro Max keep the exact panels of their predecessors: 2622×1206 pixels on the 6.3″ model and 2868×1320 on the 6.9″ model, both at a device pixel ratio of 3. That gives CSS viewports of 402×874 and 440×956, identical to the iPhone 17 Pro line. For web developers this is good news. If your layouts already hold up on the 17 Pro, nothing about the viewport math changes, and these two widths will stay the most common premium iPhone sizes in your analytics for at least another year.

Both widths sit well below the first Tailwind breakpoint (sm, 640px) and the first Bootstrap breakpoint (sm, 576px), so every visitor on these phones receives your base mobile styles. The interesting edges appear when the phone is rotated: 874px crosses md (768px) and 956px sits just under lg (1024px). A landscape iPhone 18 Pro Max therefore receives your tablet layout, often with a navigation bar that assumes far more vertical room than 440px of height can offer. Test both orientations, and check that sticky headers and cookie banners do not eat half the landscape viewport.

The smaller Dynamic Island shifts the top safe area slightly, so pages that use env(safe-area-inset-top) with viewport-fit=cover should be rechecked rather than assumed. Serve full-width images at 1206px and 1320px wide through srcset so the 3× panel stays sharp without shipping desktop-sized files. Touch targets need at least 44 CSS pixels, and the 402px width leaves little room for two side-by-side buttons with generous padding.

The 3000 nit outdoor peak means more browsing happens in direct sunlight. Low-contrast grey text and thin hairline borders that look elegant on a desk monitor can vanish outdoors, so verify your contrast ratios meet WCAG AA at the very least.

The iPhone Duo is Apple's first foldable iPhone, announced on September 9, 2026 and shipping on October 23. It has two displays: a 5.4″ outer screen at 1398×2034 pixels and a 7.6″ inner screen at 2670×1878 pixels that opens in landscape. Assuming the usual iPhone device pixel ratio of 3, that works out to CSS viewports of about 466×678 on the outer screen and 890×626 on the inner screen. Apple has not published browser values yet, so treat both numbers as estimates until the device is in hand.

The outer screen is unusually short and wide for a phone. At 466px it is the widest iPhone viewport ever in portrait, yet 678px of height is less than any modern iPhone offers. Hero sections sized with 100vh and onboarding flows that expect 800px or more of vertical space will feel cramped. Unfolded, the 890px width crosses Tailwind md (768px) and Bootstrap md (768px) but stays below lg (1024px), so visitors get your tablet layout on a screen that is wider than it is tall, unlike a portrait iPad.

Plan for the transition between the two states. When the phone unfolds, the viewport jumps from 466px to 890px in one step, which fires resize events, can re-trigger layout-dependent JavaScript and may reset scroll position if you rebuild components on breakpoint changes. Use CSS for the layout switch wherever possible, avoid storing layout state that depends on a fixed width, and test with Split View because the inner screen supports two apps side by side, each with a narrower viewport.

The Dynamic Island appears on both screens, so safe area insets matter in both states. Check that fixed headers and bottom toolbars respect env(safe-area-inset-*) and that nothing important sits under the island on the inner display.

The Galaxy S26 FE brings a 6.7″ FHD+ panel at 2340×1080 pixels to Samsung's more affordable flagship tier. At the device pixel ratio Samsung typically uses for this panel size, the CSS viewport works out to about 412×891, the same logical size as the Galaxy S26 Ultra at its default FHD+ setting. Samsung does not publish browser values, so treat 412×891 as an estimate, but it matches the family pattern closely.

The 412px width is the classic large Android size and sits comfortably inside your base mobile styles, below Tailwind sm (640px) and Bootstrap sm (576px). Because the FE shares its viewport with the far more expensive Ultra, a single test pass at 412×891 covers a wide price range of Samsung phones. It also sits 52px wider than the 360px Galaxy S26, which is why the two most common Samsung widths in your analytics are likely to be 360px and 412px.

For a quick test pass on this device, check that product grids switch cleanly from one column to two at a width your design intends, that text inputs do not trigger horizontal scrolling when the on-screen keyboard appears, and that tap targets remain at least 48 CSS pixels as Android guidelines recommend. At a DPR of roughly 2.6, full-width images need a source of around 1080px wide to stay sharp.

FE models tend to stay on sale for a long time and are popular in markets where users keep their phones for several years. Performance budgets matter: heavy JavaScript and uncompressed images will be felt more on this chipset than on the Ultra, even though the viewport is the same.

The Pixel 11 lineup reuses the panel resolutions of the Pixel 10 family: 2424×1080 on the 6.3″ Pixel 11, 2856×1280 on the 6.3″ Pixel 11 Pro and 2992×1344 on the 6.8″ Pixel 11 Pro XL. That puts the CSS viewports at roughly 412×924, 410×914 and 448×997. The base model value is well documented for the Pixel 10, while the Pro values are derived from physical resolution divided by the default device pixel ratio, so they may differ by a pixel or two depending on the display resolution setting.

All three widths fall inside your base mobile styles, below Tailwind sm (640px) and Bootstrap sm (576px). The spread between 410px and 448px matters more than it looks: a two-column card grid or a row of four icons can fit on the Pro XL and wrap on the Pro. The tall 20:9 shape means about 900 to 1000 CSS pixels of height, so above-the-fold content has more room than on an iPhone, but long forms still need clear progress cues.

For your test pass, cover 410px and 448px as the two Pixel extremes, check that line lengths stay readable at 448px where single-column text gets noticeably wider, and confirm that sticky bottom navigation does not collide with the Android gesture bar. Serve full-width images at up to 1344px wide for the Pro XL panel.

The Pixel 11 Pro Fold launched alongside the phones with an 8.0″ inner display at 2076×2152 pixels, estimated at about 791×820 CSS pixels. That near-square viewport sits between Tailwind md (768px) and lg (1024px) and deserves its own check if you see foldable traffic.

Samsung's summer foldables arrived on August 7, 2026 in three shapes. The Galaxy Z Flip8 keeps a 6.9″ main display at 2520×1080 pixels, which at a device pixel ratio of 3 gives an estimated CSS viewport of 360×840. The Z Fold8 Ultra pairs a 6.5″ cover screen at 2520×1080 with an 8.0″ inner display at 2256×2504, and the new Z Fold8 introduces a wide 4:3 inner screen at 2448×1848. Cover screens behave like ordinary tall phones at about 412×960; the inner screens are where things get interesting.

The Flip8 at 360px is one of the narrowest modern viewports, so it is the device that exposes overflow first: long words in headings, fixed-width tables and buttons with generous horizontal padding. Its 21:9 shape gives a very tall viewport, which helps above-the-fold content but makes 100vh hero sections look stretched. On the Fold8 Ultra the inner display lands somewhere between 860 and 1130 CSS pixels wide depending on the default density, which means it can fall on either side of the 1024px breakpoint. Until measured values are available, test both 860px and 1128px.

Foldables change size while a page is open. Unfolding fires a resize from a phone width to a tablet width, so avoid layouts that only compute sizes on load, keep carousels and virtual lists responsive to container size, and prefer container queries for components that appear in both states. Check that your site keeps scroll position and form input when the viewport changes.

The 4:3 inner screen of the regular Fold8 is closer to an iPad in landscape than to a phone. Designs that assume foldables are square will look noticeably different there, so add it to your matrix if your analytics show Samsung foldable traffic.