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.

Sizes

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