devices

devices

pick a device

the device knob sets a size, a ratio and a touch screen in one pick. the presets come in six families:

  • iPhone, such as iPhone 18 Pro (402 × 874) and iPhone SE (375 × 667)
  • Pixel, such as Pixel 10 (412 × 924)
  • iPad, such as iPad mini (744 × 1133)
  • MacBook Air 13 (1470 × 956)
  • laptop (1366 × 768) and desktop (1920 × 1080)

the panel's device list has them all, and search finds them by name, kind or platform, such as pixel or tablet.

landscape and custom sizes

landscape turns the frame. type a size such as 390x844 for a custom one.

mocks, bezels and the phone's browser

a phone or tablet comes up in a mock of its body: the glass, the island or punch hole, the buttons. every iPhone and Pixel wears its maker's own bezel. the mock switch in the device editor turns it off.

a phone also shows the page in its browser: Safari's bars on an iPhone, Chrome's toolbar on a Pixel. the browser knob picks the layout, or off for the whole screen, and the bars minimize as the page scrolls.

touch and the user agent

a touch device gets a touch screen inside its frame: (pointer: coarse) matches, and the mouse acts as a finger, with a round dot for a cursor. a press scrolls and flings, and a tap clicks.

a device sets the user agent to its own browser too. the frame reloads when a pick changes the user agent, the touch screen or the ratio.

the iPhone Duo

the iPhone Duo folds. it comes up closed on its cover screen, and unfold and fold in the device row open it onto its inner screen and shut it again, with the fold drawn in view.