Use case · design QA

How the page reads on a device you do not own.

See a page as an Android user and as an iPhone user, with the right viewport, the right touch behaviour, the right user agent and the right emoji — without owning either device.

design QA Design QA across devices See the page as an iPad or a Galaxy user would, without owning either.
the problem

A narrow window is not a phone.

A narrow browser window is not a phone. Sites branch on touch, on the user agent and on device pixel ratio, so a squeezed desktop layout looks like a mobile bug that is not there — and the emoji are wrong on both.

the answer

A preset is a whole device.

A preset is a whole device: viewport, scale, touch, user agent, and the emoji set that device would actually render. Change one parameter to change the device.

// the call
{
  "url": "https://example.com",
  "preset": "iphone",
  "color_scheme": "dark"
}
preset: "iphone"

Presets are frozen by name. iphone will not quietly become a newer model and change everybody's webshots.