Dear community
I have been trying to make my fullpagejs work on mobile for days now.
I tried to follow this tutorial:
https://webflow.com/website/fullpage-js-interactions
And I feel like I did everything the same way.
By emulating a phone with the inspector tool, I found a difference between my site and the teamplate site:
Is anyone able to spot the mistake I have made? That would be a huge help!
lol_no
(lol no)
February 10, 2021, 3:01am
2
it looks fine to me from my actual Mobile (iPhone 11) i’ve noticed sometimes the emulator isn’t always the most accurate
Thanks for the answer @lol_no !
Yes it also works well on my iPhone X. I identified the problem on an android device.
I also gathered more information in the meantime.
The window.innerHeight variable seems to be off for me, but only on my website.
My sections seem to be taking up the window.innerHeight height.
The clonable you link (https://webflow.com/website/fullpage-js-interactions ) is using a very old version of fullPage.js (2.9.7) and the current version is 3.0.9.
I would recommend you to update and try again.
after updating, the issue still persists.
The issue seems to only happen in chrome browser when emulating phones. (also in the edge browser and on real mobile phones using chrome)
Here is another screenshot with the new version in google chrome:
Topic continued on the fullpage.js forum:
opened 12:21PM - 10 Feb 21 UTC
closed 03:16PM - 10 Feb 21 UTC
Reproduction required
### I was wondering why FullPageJS uses window.innerHeight
According to this [… source](https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight) , there are major drawbacks to using innerHeight. For example for chrome on android you should be using window.outerHeight instead because for some reason they are using the wrong value.
To me [document.documentElement.clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) looks like a much better solution.
Can you explain why you are using window.innerHeight in your implementation?
### Problems in my own implementation of FullPageJS
You can visit [this](https://kombucha-moya-noe.webflow.io/) site and emulate a mobile device.
When in reality the width and height of the Moto G4 are 360x640, these are the results I get in the console:
window.innerHeight
1072
window.outerHeight
640
document.documentElement.clientHeight
640
There also is a post on the webflow forum about this issue:
[webflow post](https://forum.webflow.com/t/wrong-height-for-fullpagejs-sections/157458?u=ericreator)
So the problem was due to positioning elements absolutely within a section.
When doing this and using FullPageJS, you should always set the overflow property to:
overflow: hidden;
Or esle these absolute elements might mess up your section heights.
Hi! @EriCreator . I was hoping to solve my issue, one which I’m pretty sure is similar to yours. Did you solve it just by changing overflow to hidden? Or did you combine by adding ‘window.innerHeight’ somewhere in the custom code?
Here is my site: https://jacob-darfelts-marvelous-d1ad995d6ead8e.webflow.io/
Thanks