AnonyMouse AnonyMouse -4 years ago 137
Android Question

Samsung Galaxy S7 slow to assign correct value to viewport height?

When loading a page, to check whether to use style for Landscape or Portrait orientation, we use the viewport width and height:

var viewPortWidth = $(window).width();
var viewPortHeight = $(window).height();

if(viewPortWidth > viewPortHeight)
// Landscape style

In all phones it works fine, except for Samsung Galaxy S7, where the height value is incorrect on the initial load.

In Samsung Galaxy S7, when a page is loading in portrait orientation, I print these values to the console:


returns 330


returns 310 - incorrectly

Then, when the page is fully loaded I query those values in the console again and this time:


returns 330


returns 520 - correctly

  • When I refresh the page it works as expected - it is only during the initial
    load, when navigating from another page to this one, that
    does not hold a correct value.

  • This is only an issue on dev and testing environments, and is not
    an issue on production.

  • This only happens on some pages and not on others.

It seems to take around 150 milliseconds for the correct value to be assigned to
so I've delayed the function that assigns the style by 150 milliseconds for now.

I'm curious as to whether this is an issue specific to the Samsung Galaxy S7. Has anyone come across this before and, if so, how did you solve it?

Answer Source

This was caused by the soft keyboard on Android. When the keyboard opens the value $(window).height(); changes to (previous window height - keyboard height).

I would type into a search bar and press enter, and then when the search results page was loading the soft keyboard from the previous page still hadn't retracted for the first x amount of milliseconds in which my style check was done.

This was solved by using the value in window.orientation to check whether an Android device is in portrait or landscape mode, instead of just relying on a comparison of the values in $(window).width(); and $(window).height();

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download