CODEWITHSUNDEEP
javascriptmobileresponsive
Guilherme Laureano
Guilherme Laureano

Reputation: 123

How to identify Address bar in Mobile Device?

When you scroll down or up in any web site the Address bar show/hide. I wish identify when the bar is hidden or visible.

Example:

if (chromeBarIsHidden()) {
console.log('a');
} else {
console.log('b');
}

Upvotes: 2

Views: 3272

Answers (1)

user12359228
user12359228

Reputation:

There is no exact solution

There is no native way to do this in any browser. However, using the dimensions and window resize events, there have been solutions developed. See this Stack Overflow answer. However, unless absolutely necessary, I would not recommend this for the following reasons:

  • The browser may be on a computer with a window resize, causing the window.onresize event to not accurately represent the change
  • Different mobile browsers handle the hiding of the top bar differently. The above solution could work if you are sure that the client is on Android Google Chrome.
  • Users may expect UI elements in your webpage to move with the top app bar being hidden, causing an inconsistent user experience across webpages

Alternatives

window.onresize Event

The window.onresize event will fire whenever the browser's window size changes. This can be used to resize and change the layout of the page through JavaScript with different window sizes. To use this, see the example below.

window.onresize = function() {
    // Do something on resize
}

window.innerHeight Property

The window.innerHeight property returns the view height of the viewport. This can be used to determine if layout arrangements will need to change based on height.

var windowHeight = window.innerHeight;

Responsive design

A better alternative to changing things depending on the viewport size, which changes when the address bar hides itself. See this article by w3schools.

Upvotes: 1

Related Questions