CODEWITHSUNDEEP
cssmobileresponsive-designviewport
Adam Szmyd
Adam Szmyd

Reputation: 2973

How to calculate viewport width based on device specification

Im trying to understand how vieport width is calculated for mobile devices. I've tried it on real device and it works the same but I'll paste screenshot with emulator.

The question is: why the viewport width is 432px when the device width is 1080px and density is 420dpi? I undestand that the viewport metatag should set the viewport width to device actual width right? So it should be 1080px yes?

This might be trivial but i dont undestand from that 432px came from exactly.

Screenshot: enter image description here

Upvotes: 5

Views: 7266

Answers (1)

Augusto Souza
Augusto Souza

Reputation: 101

ViewPortSize = ScreenPixelResolution / DevicePixelRatio

eg: iPhone XS Max

ScreenPixelResolution: 2688 x 1242

DevicePixelRatio: 3

ViewPortSize: 896 x 414

Upvotes: 2

Related Questions