Developing a site. Faced a problem when scrolling in Chrome on Android changes the height of the element. It is worth mentioning that I set the height for a specific element equal to the height of the screen:

var el = jQuery('#first-screen'); jQuery(window).resize(function () { el.height(jQuery(window).height()); })

But when scrolling in Chrome, while either the address line appears or disappears, the element height changes to 56px . Which leads to unpleasant skimp content.

How can this be fixed?

Ps. Site address - crystal.ananas.net.ua

    1 answer 1

    If I correctly understood the essence of the problem and the behavior of chrome in my mobile phone coincides with all the others, then the mobile chrome when scrolling down the page from the initial (upper) position removes the panel of the website address at the top, because of which the document resizes. In turn, your script responds to this change and customizes the top block to the new size. The result - the document is twitching.

    As a solution to the problem, I can only advise to remove the fit of the upper element during resizing. Why? Because the end user most likely will not specifically resize the site to see how it adapts. If the adaptation for cell phones is so important, then the effect of changing the size of the first block is not placed on the document resize, but on the resolution change (vertically / horizontally) - when the width of the document becomes greater than the height (and vice versa)

    Or you can bind to change the width of the document.

    • I will try to hang on changing the orientation of the device. About hang on the change in width. Can be more? - wkornilow