The size of the most common viewports can be important when optimizing the responsiveness of your website. Some people suggest that only the horizontal size matters because vertical media queries are almost not used. I don’t agree completely with this.
Knowing where the fold is, gives you an opportunity to place certain content in the visible area. Via media-queries you can try to match as close as possible to get “above the fold”. Even better; if you are using viewport (vh, vw, vmax, vmin) as a unit, you can always get your stuff above the fold. But still then the actual viewport hights are needed to check out if your sizing looks OK in real life. Simply using the resolution of the devices will not work because of the browser interface and phone/OS interface sitting in the way.
To make it even more difficult, when scrolling down, the viewport changes because the browser interface removes itself.
In the end we want something that enables us to emulate the experience on the most common devices. That is why we need a list of viewport sizes and screenresolutions.
problems: Safari does not tell us the viewport. It seems to me almost identical to chrome:
in portrait mode at top of page: just a few pixels larger than chrome area.
in portrait mode scrolled down: just a few pixels smaller than chrome area becasue of the URL bar.
in landscape mode at top of page: just a few pixels smaller than chrome area; it removes the complete phone bar at top, but gives us a bottom bar for sharing.
in landscape mode scrolled down: just a few pixels larger than chrome area; it even removes the top phone bar.
|Device name||virtual resolution||browser||orientation||position||side one||side two||obsctrucitons|
|iPhone SE||320x568||Chrome v 66.0.3359.122||portrait||top||320||492||76|
|iPhone SE||320x568||Chrome v 66.0.3359.12||portrait||scrolled||320||548||20|
|iPhone SE||320x568||Chrome v 66.0.3359.122||landscape||top||568||244||76|
|iPhone SE||320x568||Chrome v 66.0.3359.122||landscape||scrolled||568||300||20|
|Full HD screen on Debian xfce with fixed bar (default)||1920x1080||Chrome v 63.0||landscape||top/scrolled||1920||983||97|