The Ideal Viewport Doesn’t Exist
Loved the visual example of 3 distinct viewports on a single iOS device: Safari, in-app browser (boo!), and the long-press quick preview.
By our friends at @setstudio (@andy et al!)
14 replies
@setstudio @andy device pixel ratios further complicate this story 😅
@zachleat @setstudio @andy The ideal viewport is the one I’m using at the moment.
@grigs @setstudio @andy which one is it??
@zachleat @setstudio @andy Well, my screen size is 1920x1080, but let me open dev tools so I can see what my viewport size is…
Oops, sorry, now it is 1418x892 with dev tools open. Let me close dev tools and see if I can find a screen ruler to measure. Ok, I'm just going to split screen this window so I can find the ruler…
Oh, now the ideal viewport is 940×979 at half screen…
Maybe I should build my own site that auto-publishes my viewport so everyone can keep up?
@grigs @setstudio @andy bereal but for viewport sizes, I like it 😅
@zachleat @setstudio @andy I’ll get the VCs lined up asap.
@grigs @setstudio @andy AI has replaced VC, thankfully
wait I think I’ve misread something
@zachleat I feel bad about all the work @andy and @setstudio did on their beautiful site only to find out there is an ideal viewport.
So I asked ChatGPT for code to find my viewport to add to the site. It suggested:
var idealViewportWidth = window.innerWidth;
var idealViewportHeight = window.innerHeight;
var sentence = "The ideal viewport is " + idealViewportWidth + " pixels wide and " + idealViewportHeight + " pixels tall.";That should work until we get funding and can build a realtime API.
this looks so crisp, outstanding work 😍
@mfru @zachleat @setstudio thank you!
@zachleat @setstudio @andy This is the type of advertising I can get behind. Useful website, looks stunning, informative. Nice!
@mahryekuh @zachleat @setstudio thank you!