10

I want to detect in Javascript if a Smart App banner is currently displayed. I already inspected the DOM but there is no evidence of the banner.

Marco Marsala
  • 2,332
  • 5
  • 25
  • 39

3 Answers3

6

This is an old question, but maybe this will be useful to someone. I did this in a following way:

  1. Detected iOS user-agent;
  2. Used window.matchMedia to determine device type and orientation with media queries;
  3. Checked window.innerHeight

After my experiments I have following experimental window.innerHeight values for different devices with banner shown. You can find them below:

  • iPhone 6 Plus portrait: 544px;
  • iPhone 6 Plus landscape: 286px;
  • iPhone 6 portrait: 475px;
  • iPhone 6 landscape: 247px;
  • iPhone 5 & 5S portrait: 376px;
  • iPhone 5 & 5S landscape: 148px;
  • iPhone 2G, 3G, 4, 4S, iPod Touch generations 1-4 portrait: 288px;
  • iPhone 2G, 3G, 4, 4S, iPod Touch generations 1-4 landscape: 148px.

Hope this will help someone.

Kirk Hammett
  • 656
  • 8
  • 24
2

While the Smart App Banner doesn't show up in the DOM, it does decrease the available height of the browser window by 84 pixels ( that's the number I got with IOS7 + iPhone5 ).

I'm going to use this decrease in window.innerHeight to determine if the SmartBanner is displayed.

( I'll need to determine if the user has iPhone4 or iPhone5 )

Mobile Safari does have other bits that affect the window.innerHeight but at most the bottom menu ( share, etc. ) and the larger address bar at the top decrease available height by 69 pixels ( again that's what I got via the Safari Web Inspector ).

dougwig
  • 526
  • 6
  • 8
2

if you are using jquery:

hasSmartBanner = window.innerHeight !== $(window).innerHeight();
jilykate
  • 5,430
  • 2
  • 17
  • 26
  • I'm not using jquery. So, is there anyways to do that with vanilla-js? Thanks. – tuanngocptn Nov 15 '22 at 09:32
  • 1
    @tuanngocptn, `if(window.innerHeight === window.document.documentElement.clientHeight) { /* no app banner showing */ }` Please note that this isn't consistent, some devices may show the app banner and not change the height. A method to hide the app banner is to use `window.scrollTo({ top: 200 });` (200 is a random number choice, you can change it) then immediately `window.scrollTo({ top: 0 });`. The app banner should detect the scroll event and hide itself. – Allan Bogh Feb 10 '23 at 17:47