Mobile Chrome Support - Githubissues

rodneyrehm / viewport-units-buggyfill

Making viewport units (vh|vw|vmin|vmax) work properly in Mobile Safari.

MIT License

1.59k stars 151 forks source link

Mobile Chrome Support #83

Open bramus opened 7 years ago

bramus commented 7 years ago

cfr. https://stackoverflow.com/questions/39384154/calculating-viewport-height-on-chrome-android-with-css:

So I noticed that mobile Chrome calculates the address bar into the viewport height. Because of this using height: 100vh on an element doesn't work because when the address bar scrolls the viewport height changes.

The fix – which I've verified to work – is to define the viewport height as follows:

var vH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

This is also the same behavior verge has implemented (found via http://ryanve.com/lab/dimensions/).

Regards, Bramus!

rodneyrehm commented 7 years ago

What exactly do you expect the viewport-units-buggyfill to do here?

stevage commented 7 years ago

The same thing as it does on Mobile Safari, no? In particular, it should work consistently across versions of Mobile Chrome.

(I haven't tried this library yet.)

bramus commented 7 years ago

Hi @rodneyrehm,

What @stevage says sums it up quite nicely: "the same thing as it does on Mobile Safari" :-)

Note that this adjustment will not only fix Chrome on iOS, but will also fix any UIWebView implementations inside apps (e.g. the browser embedded in the Facebook app).

I can create a simple testcase if you want.

Regards, Bramus.

rodneyrehm commented 7 years ago