fullPage.js
fullPage.js copied to clipboard
alvarotrigo
Enter Fullscreen in Mobile view?
Hiya,
Sorry might be noobish question but In mobile view and on tablet i am unable to enter full screen mode {like when i push up it hides the tabs and url bar on android}. Is that a Fullpage.js option i can change?
Currently i am using Fullpage like this for sections -
And my options look like -
new fullpage('#fullpage', {
//options
scrollBar: true,
autoScrolling: true,
scrollingSpeed: 1500,
navigation: false,
anchors: [
'home',
'aboutus',
'services',
'residential',
'commercial',
'gallery',
'contact',
],
controlArrows: false,
slidesNavigation: true,
})
Many thanks,
Will
Disable the scrollbars by using scrollBar: false.
That should fix the issue by preventing the address bar to get hidden.
On fullpage.js v4 this issue will probably go away.
Disable the scrollbars by using
scrollBar: false. That should fix the issue by preventing the address bar to get hidden.On fullpage.js v4 this issue will probably go away.
Thanks Alvarotrigo. Tried what you suggested but still doesn't enter fullscreen mode in mobile. Only way i can currently do it is removing that entire script itself.
I have changed my section's to this now if that makes any difference.
<div
class="section fp-auto-height-responsive about"
data-anchor="aboutus"
>
Cheers, W
I can't really as i only have a tablet and no other phone to record. Can send you over files though? I was looking at some other peoples example sites and they had the same behaviour on mobile.
I was looking at some other peoples example sites and they had the same behaviour on mobile.
If your address bar gets hidden on the demo page and on the examples (like this one) then there's probably nothing we can do about it.
I personally can not reproduce the issue on my iPhone 11 in either Safari, Firefox, or Chrome. (Using iOS 15.4). Scrolling up and down won't cause the scroll bar to disappear.
I'm not able to reproduce the issue either on Android by using real devices on browserstack.com using a Samsung S22 with 12.0.
Video here:
https://user-images.githubusercontent.com/1706326/160381989-b0295b62-de23-4b34-a44c-86f3482252fb.mp4
I think we are getting cross wires. I WANT the URL and tabs to dissappear {when you push up with your thumb on android it hides the url and tabs}. That's full screen mode. It works on most sites but FP seems to restrict it.
If you want it to disappear on scroll, then use scrollBar: true.
However, note the height of the sections won't update and you will see part of the next or previous section on the viewport.
This should get fixed in fullPage.js v4. But I'd probably recommend keeping the address bars visible if you want to prevent some glitches while the sections adapt to the new viewport size.
Note we developers have very little control over the address bar. The only way to get the default behavior is by enabling the scroll bar.
I think it might be an issue when the address bar is in the bottom of the windows in IOS on iphone. The scrollbar true/false doesn't seem to make any difference. When the user scrolls the available screen height grows and shrinks depending on if the adress bar hides or not...
https://user-images.githubusercontent.com/90636/161012883-d633d518-0d45-4742-9f2a-d69426f3b29e.MP4
Adding some css will prevent the safari adress bar from hiding, that solved it for me. maybe this is already an available setting that I missed or something. In that case, sorry but I just started working with this script :)
html,
body {
overflow: hidden;
height: 100%;
}
maybe this is already an available setting that I missed or something.
fullPage.js takes care of that. You can see those styles being applied to both the BODY and the HTML element with inline styles:
I've tried this page from my iOS 15 iPhone and I can't reproduce the issue in Safari.
However, I'm able to reproduce it on Browserstack.com. So this confuses me quite a lot. Perhaps is an iOS config?
What iOS version are you using? I'm under 15.4 on my iPhone. The reproduction on Browserstack is under 15.1 (perhaps there was a safari bug back there?)
When inspecting in Chrome on my Mac I can clearly see that your script DOES do this, however it doesn't seem to trigger on my phone which is weird...
I'm using 15.3.1 on iPhone XS. I've configured Safari to use "Tab Bar" instead of "Single tab" (if that might have something to do with it?)
ok, I just connected my iphone to my macbook for some debugging. It seems that there's nothing wrong with your script, but this HTML was missing
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
and as I added both my css and this markup at the same time I thought it was the css that fixed it. But it was the meta viewport!
and as I added both my css and this markup at the same time I thought it was the css that fixed it. But it was the meta viewport!
So just to clarify it, you are not able to reproduce the issue on this page then?
and as I added both my css and this markup at the same time I thought it was the css that fixed it. But it was the meta viewport!
So just to clarify it, you are not able to reproduce the issue on this page then?
I can reproduce the behaviour on this url, as it's missing a meta viewport.
However, When I injected the meta viewport into the code, the url-bar stopped hiding when scrolling. So maybe you'll need to add the meta viewport? (I know that it will screw over all your css though)
However, When I injected the meta viewport into the code, the url-bar stopped hiding when scrolling. So maybe you'll need to add the meta viewport? (I know that it will screw over all your css though)
What is weird is that I can not reproduce the issue on my iOS 15.4 on that same URL. So it looks like some kind of change in Safari in the newest iOS?
What is weird is that I can not reproduce the issue on my iOS 15.4 on that same URL. So it looks like some kind of change in Safari in the newest iOS?
I guess we will never know :) At least we found a solution for the people experience the same error. Just add meta viewport 👍