Device Release Blog

The iPhone 17 is the first standard (non-Pro) iPhone to ship with ProMotion 120 Hz, a milestone that closes the display quality gap between Apple's base and Pro models. For web developers this has a direct implication: scroll-driven animations, CSS transitions, and canvas-based effects that previously looked smooth on Pro iPhones but "fine" on standard models will now look consistently smooth across the entire iPhone 17 line — raising the bar for animation quality at 402px width.

The 402px CSS viewport width is the same as the iPhone 16 Pro, making this a stable testing target shared across both base and pro tiers. Any media query adjustment you add for 402px will benefit the combined audience of both models.

At 2000 nits outdoor peak brightness, iPhone 17 users are highly likely to view your site in sunlight. This is the moment to check color contrast ratios — not just WCAG AA (4.5:1 for normal text) but also how your brand colors, call-to-action buttons, and background/text pairings read in direct sunlight simulation. Low-contrast design choices that look acceptable in a darkened studio are exposed on a sunny day.

The Samsung Galaxy Tab S11 Ultra is the largest widely-used Android tablet, and at a CSS viewport of 960×1600 in portrait mode it occupies a unique place in the responsive testing landscape. The 960px width falls in a zone that many frameworks treat as "tablet" but render with desktop-style layouts — and 16:10 aspect ratio means unusually tall portrait content areas.

For web developers, 960px width is the key dimension to verify. If your tablet breakpoint is 768px and your desktop breakpoint is 1024px, this device gets the desktop layout at a width that may be too narrow. Multi-column grids, sidebars, and navigation drawers that appear at 1024px will appear the same at 960px — where they may be cramped by the narrower canvas.

The jump from 930 nits (S10 Ultra) to 1600 nits peak brightness also means S11 Ultra users are more likely to use the tablet outdoors. Designs that were acceptable at 930 nits may show contrast issues at 1600 nits in bright conditions, particularly subtle gray-on-white backgrounds, light-colored borders, and low-saturation UI elements.

The Pixel 10 Pro is the flagship Android developer reference device and its CSS viewport of roughly 410×914 (448×997 on the Pro XL) sits right next to the classic 412px Android width. Google's own products are designed and tested around this width, which means many Android users are accustomed to layouts that assume a 410 to 412px viewport.

The Tensor G5 is the first Pixel chip manufactured by TSMC, delivering substantially improved performance. As Pixel devices become faster, users will visit more complex web applications on them — and performance expectations will rise. Sites that feel sluggish at 410px due to large JavaScript bundles or unoptimized images will now face higher user scrutiny.

The 20:9 aspect ratio produces a tall, narrow viewport at about 410×914. This means more vertical scrolling is required for any content that does not fit above the fold at 410px wide. Review your above-the-fold experience: hero sections, onboarding flows, and landing page value propositions should communicate their core message without requiring scrolling on this viewport. Qi2 support also reflects how core this device is becoming for embedded near-field web interactions and payment flows.

The Galaxy Z Fold 7 presents the most complex responsive testing challenge of any phone: a single device with two completely different viewports. In its folded cover state it behaves like a tall, narrow phone of about 412×960 (21:9 ratio). When unfolded it expands to a near-square viewport of roughly 984×1092, a ratio unlike any other mainstream device.

The cover screen at about 412×960 falls within standard mobile phone dimensions and should be handled by your regular mobile media queries. But the unfolded viewport of roughly 984×1092 is genuinely unusual: it is wider than most tablet portrait modes (820px) yet almost square, and it lands just below the common 1024px desktop breakpoint. Content that assumes a portrait tablet may feel stretched, while content that uses horizontal tabs or side-by-side layouts may shine.

At 4.2 mm the Fold 7 is the thinnest foldable phone ever made, making it increasingly pocket-friendly and mainstream. As foldable adoption grows, your responsive layouts must handle graceful transitions between the two viewport states. If you use CSS environment variables for safe area insets, verify they apply correctly in both states — the hinge creates a physical gap that affects how content in the center of the unfolded screen should be positioned.

The OnePlus Pad 3 ships with the highest refresh rate of any mainstream tablet at 144 Hz, and its unusual 7:5 aspect ratio creates a CSS viewport of 1131×1600 in portrait — a combination that does not fit neatly into any standard breakpoint tier.

At 1131px wide, the Pad 3 is wider than standard tablet portrait (820–960px) but narrower than typical laptop viewport (1280px+). Frameworks that jump directly from a 1024px tablet layout to a 1280px desktop layout will place the Pad 3 in the desktop tier with only 1131px of canvas to work with. Multi-column layouts, sidebar patterns, and card grids designed at 1280px will appear compressed here.

The 7:5 ratio is also taller than the 16:10 Galaxy Tab for the same width. Portrait use of the Pad 3 gives more vertical real estate — which is favorable for document-style content and vertical feeds but can expose oversized hero sections and thin content pages that look lost in the extra space.

With Snapdragon 8 Elite, the Pad 3 handles heavy web apps without performance compromise, raising the bar for what premium Android tablet users expect from web experiences.