I’m using the stock iPad layout size and when I view on many iPad devices I can’t see my footer. The URL bar at the top of the page is pushing my artwork lower than what it should be displaying.
I’m thinking of a few solutions to this issue, and I’m hoping to get some guidance from someone who has been here before and found a good “best practices” solution that accomplishes the greatest device compatibility.
I was thinking maybe I should design around this persistent URL bar and shrink the height on my artwork. I’m hoping someone else will know if that’s the best solution or it it’s not then suggest their working alternative.
The solutions in that article require the user to add my web page to their home screen as though it were a native app. This is very interesting functionality and will inform my thought process for future projects, but for the purposes of this project I need the page to load correctly with no user input. I work for a radio station so our contesting needs to be as frictionless as possible.
Are there any other solutions out there? It seems like a lot of people would have this problem given how many iDevices are out there.
The problem is that the browsers need to have an instruction to tell them to go hide the URL address bar.
If they are webkit browsers (safari, Chrome and Firefox) you can make that happen with the same edit to the head tag or with javascript
IE will be a problem though.
I have attached a method that will make a page view full screen and exit fullscreen using buttons but you could also edit the javascript to do the same at launch.
Bad UI form though to just force it on your user without a way for them to exit back to a normal browser window.
Try this out and see how it might work for you.
I found a discussion about this online that basically said “why would you want to do that, users will hate it and it’s harder to implement” that I thought had some merit. The alternative suggested in that conversation that I ultimately ended up using was to simply ask my users to add the experience to their home screen using the menu option for android and apple devices. This seems to work for my purposes.
