How to detect if browser address bar is showing on iOS devices? - javascript

Is there a way to consistently detect if the browser address bar is showing?
We have a HTML5 app and want to show a special link if the address bar is showing, encouraging users to add the app to their home screen for a better experience.

You should take a look at the window.innerHeight property.
That is the height of the content on screen.
The value of that decrease a lot when the address bar is visible.
You may need to test out the decrease in height on different device to make that work better

Related

Encourage mobile browser to keep address bar hidden when input is focused?

I'm aware of the general strategies for hiding the address bar, e.g. encouraging installation as home screen app and/or sometimes scrollTo hacks. In my case, however I am fine with the default behaviors. As the user navigates my app, the browser tends to eventually hide the scroll bar and that's fine.
My problem is, users need to do a lot of text editing in my app. When this happens, especially in landscape mode, the soft keyboard can take up tons of the visible screen but to make matters worse, the bar tends to re-appear! On top of over half the screen getting taken up by the keyboard itself, an additional 1/5th or so gets suddenly eaten back up by the address/tab interface even if it had gone away.
So I'm left with a tiny strip that the user can see, for no apparent reason.
I suspect this is a long shot, but is there any way to discourage these tabs from re-appearing? To be clear, the user is not trying to edit the URL, but has simply focused in an <input>/<textarea> to edit that.

Hide browser bar in mobile version

I am trying to hide the browser in mobile version and have tried to use below on load:
<script>
window.addEventListener("load",function() {
setTimeout(function(){
// This hides the address bar:
window.scrollTo(0, 5);
}, 0);
});
</script>
However this isn't working on my android device it is only scrolling down 5px and not hiding browser bar as if human scrolled down. I feel like this has something to do with viewport but can't figure.
I have tried to follow https://developers.google.com/web/fundamentals/native-hardware/fullscreen/ as well but I can only it make it work with click. I don't really want to go full screen really just hide browser as if user has scrolled down on load (if scrolled up than visible again).
I found a site that has something similar (https://www.webpagefx.com/blog/internet/interstitial-ads-google-hate/amp/) - this happens when you enter via link google search and before entry into site the browser bar has already been hidden, ie scrolled down to google search.
If anyone can help point to right direction that would be helpful so I canget started to code the script that I need. Ideal android and ios resolution (if not than just android)

Update screen size when in fullscreen and using mobile keyboard

That's quite a mouthful! I'm testing some things regarding web apps, so my test page goes fullscreen using webkitRequestFullscreen
I then decided to test how an <input type="text" /> would affect the fullscreen-ness. Sure enough the keyboard comes up just fine, but the content of the page is hidden behind it... including the input field the user would be typing in. Typing blind isn't fun.
I'm trying to figure out the screen size after the keyboard takes some of the space, so that I can adjust the page in such a way that the field becomes visible. However, properties like screen.height, window.innerWidth and the like all show full-screen values (360x640) regardless of the keyboard being present or not.
Are there any other ways of getting the screen size, while in fullscreen, and factoring in the virtual keyboard's presence?
Here's a demo, try in Chrome on mobile: link

Full page scrolling plugins (fullPage.js, scrollify.js, etc) prevents default mobile Safari UI behavior

On iOS devices, scrolling plugins like Scrollify.js, FullPage.js, and OnePage-Scroll.js seem to keep Safari's address and navigation bars in place, instead of the way they typically minimize when the user scrolls the page.
Is there any kind of workaround for this? I understand that when those UI bars minimize, the inner viewport height is changed, and so the plugin would need to recalculate the height. Also, the UI minimizes during the scroll event, and maybe that's problematic for the scrolling plugin? Is there a way to maybe hide the UI when the scroll event finishes?
When you change the orientation of the iPhone from portrait to landscape, the bars disappear, but if you bring them back by tapping the top or bottom, they stay put when you scroll.
I'd really like to have that extra height!
Is there any kind of workaround for this?
You can also use it without autoscrolling, but that might no be what you are looking for: autoScrolling:false.
If you are worried for the landscape mode, if you avoid using anchors and you load the page in portrait mode to then change to landscape, it won't show the top bar at all on iOS at least. Not the best solution, but it might help.
Personally I would recommend you to use the option responsiveWidth or responsiveHeight to change the behavior of the page on small screen devices and remove the auto scrolling and possibly have bigger sections.
In general, mobile browsers do not allow access to the top or bottom bars behaviors and there's no much developers can use to deal with them.

reload web app on orientation change

Simple problem. I have tried different search phrases. The most recent I tried is "reload web app on orientation change"
I KNOW or DEEPLY SUSPECT someone(s) have asked this question before on Stackoverflow but the search results do not answer my simple question.
1) I have a web site that renders fine on a smart phone when holding the phone in landscape view, until...
2) I re-orient the smartphone to a 'portrait' view position, where the phone is in the normal position with the long height of the phone is vertical
Then the web page is not using the whole screen. The page stays the exact same height as it was with the phone held 'sideways' in landscape mode. What I see is the page only using the top 2/5ths of the smartphone screen.
When I manually reload the page, the web page then completely fills the entire height of the screen.
I've added this and it changed nothing:
<meta name="viewport" content="height = [pixel_value | 'device-height'],
width = [pixel_value | 'device-width']" />
I prefer forcing a page reload or something ?? in javascript when the smart phone's orientation changes.
Because I know for a fact that when I reload the page after rotating the smart phone from landscape to portrait, then (and only then) will my web page use the whole height of the smart phone's screen.
I'm using only pure javascript.
How to reload my web pages in my web app when the smart phone's orientation is changed from landscape to portrait?
This is a very unsophisticated solution you are after but,
$( window ).resize(function() {
window.location.reload();
});
is a robust way to refresh the page when the user changes the orientation.
You can also use
screen.addEventListener("orientationchange", function() {
window.location.reload();
});
Generally you should make sure you write correct HTML/CSS if you want your webpage to be responsive is such settings instead of reverting to this kind of crude solutions

Categories