The screen renders at the real size of the device in points, so live content lays out as it would on the device. An iPhone 18 Pro screen is 402 by 874, the Pro Max is 440 by 956, and the MacBook is 1280 by 832. The whole frame then scales down to the width of its container. Set a max-w-* class to make it smaller, and maxScale to let it grow past its native size.
Give the content h-full so it fills the screen. Blocks built with container queries, like Banking and Strava, switch to their phone layout inside the frame on any screen.
iphone-18-pro and iphone-18-pro-max. Sizes from the published specs. The Dynamic Island is the smaller one that came with under display Face ID. Finishes are silver, glacier, burgundy and black.
android. A flat phone with a punch hole camera. Black, silver and sage.
ipad. An 11 inch tablet with even bezels and the camera on the long edge. Space black and silver.
macbook. A lid with a notch, a menu bar and a base with a hinge. Space black and silver.
The colours are close matches, not official values.
With safeArea on, the content is padded so it clears the status bar and the home indicator, like a real app. Turn it off for screenshots and videos that already include them. In landscape, phones hide the status bar and pad the sides instead.