Browser.Dom.Viewport Height vs. JS Viewport Height

Learn
1

I’m using Browser.Dom.getViewport to retrieve the viewport in order to size a map component. However I notice that the height returned for the viewport height is greater than the visible size of the viewport (tested using Responsive Design Mode in Firefox).

However the values returned using javascript match exactly the expected values, using:

        function viewport()
        {
            var e = window
                , a = 'inner';
            if ( !( 'innerWidth' in window ) )
            {
                a = 'client';
                e = document.documentElement || document.body;
            }
            return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
        }
        console.log(viewport());

Can anyone shed some light on this? Am I mis-interpreting what Viewport means, and if so how can I achieve the equivalent (i.e. measure the visible size of the screen).

2

You can see how Browser.Dom.getViewport is implemented here: browser/Browser.js at 1.0.2 · elm/browser · GitHub

One thing I know that may or may not be related to this, is that some ways of measuring the viewport size includes scrollbars and some don’t.

1 Like
3

Ah excellent this is really helpful thank you. I’ll compare this against the js fragment and attempt to figure out where the difference lies (and report back here).

4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.