Search code examples
htmlcssscreenviewport

Mobile devices: get screen area size and position with css, not just viewport's

This question states what I took months to figure out:

is mobile viewport size larger than screen size?

That is, the contents rendered in the screen area of mobile browsers sometimes are just part of the viewport. They are the same only when the zoom-out specified by meta viewport tag is the current zoom value.

Some problems arise with this model, eg: css-sticky headers do not appear in the screen and centered elements (relative to the viewport) are not centered relative to the screen. The final user loses some information depending on the zoom.

I could try to solve those positioning problems if there were some css values that refer to the screen area size and position. Which are them?

Or, at least, is it possible to get the visible screen rectangle with javascript?

EDIT1

I checked for changes in properties directly under window, window.screen, document and document.documentElement while moving the screen position, but no changes were detected other than when the true viewport needed to move because the screen moved out of its current bounds.

EDIT2

First answer do not address the problem. I put the code to run and console.log the result each 1 second here:

http://wlee.eu5.net/viewport.php

Open it on Chrome simulating mobile devices and scroll a little. Even though the screen has moved, the logged dimensions will not change until the screen reaches the true viewport limits.

You can see it looking to the "I am centered" text, which is always in the center of the viewport, but not screen. Also, the viewport has red outlines.

I think mobile browsers take a piece of the viewport to show into the screen, and that's precisely this piece's position that I am looking for.

Solution

  • Found it! It comes under window.visualViewport.

    https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport

    The method JSON.stringify were not able to get visualViewport properties, so I couldn't watch them changing while scrolling the page.

    Summary

    visualViewport.pageLeft/Top gets the scrolled viewport relative to the page.

    visualViewport.offsetLeft/Top gets the screen rectangle relative to the viewport. This rectangle is what mobile browsers show on screen when you zoom the page, which happens without changing the page scroll.

    No css found for this one. I'll keep searching.