Understanding orientation, aspect ratio and CSS pixels on mobile devices

For my current project, I need to optimize a page layout in landscape mode for mobile devices. Can you help me to understand the different ways that the browser window size is measured?

I am working with an Android smartphone with hardware pixel dimensions of 720 x 1280 pixels.

Portrait Mode In portrait mode, when I use JavaScript to get the document.documentElement.clientWidth and ~Height, I get the result 980 x 1394.

When I use the following CSS...

  html {
    height: 100vh;
    width: 100vw;
  }
  body {
    height: 100%;
    width: 100%;
    margin: 0;
  }

... Chrome Development Tools reports that the size of the body is 980 x 1546.

720 x 1280 smartphone in portrait mode

Landscape Mode In landscape mode, things seem even more complex. In my test, I explicitly CSS set the dimensions of the whole <html> tag to 100vw x 100vh, and the body width and height to 100%.

html element in landscape mode

However, JavaScript reports the clientWidth and clientHeight as 980 x 460, while Chrome Development tools shows the dimensions of the html and body elements as 980px x 556px, although neither of these elements fills the screen width or height.

body element in landscape mode

A <main> element whose width is set to 200vh and whose height is set to 100vh fills the entire width of the screen in landscape mode, but leaves a gap in the vertical direction, despite the fact that Chrome reports it to have dimensions of 1112px x 556px.

main element in landscape mode

It would also be very helpful to know what exactly the different dimension properties are measuring, so that I can understand how they should be used.

EDIT:

To reply to @Kaddath: No, I had not configured a viewport meta tag. When I add the tag <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">, the dimensions change. In particular the `` clienttWidth in portrait mode becomes the screen width in hardware pixels, divided by the devicePixelRatio, which makes perfect sense. The clientHeight appears to be the height of the screen in CSS pixels, minus the height of the app bar and the built-in button bar.

body portrait with viewport defined

In portrait mode, the values for clientWidth and clientHeight are not so easy to explain.

body landscape with viewport defined main landscape with viewport defined

Answers:

Answer

To better understand how browser work on different situation try to call you function with

setTimeout(showSize,300);

onresize doesn't fire correctly on all browsers.

Also try window.outerWidth and window.outerHeight.

It is very much to explain but you will learn.

You can also read https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.