tylerjpeterson / ios-inner-height Goto Github PK

Hi tylerjpeterson,

looks interesting!

I also have the problem with the iPhone in the landscape mode.
Navigation is hidden by the address bar.

Can you please tell a javascript beginner how I can integrate it into a bootstrap onepager?
https://www.valtcon.de/test/

Thanks in advance
Hans

Hi,

First of all, thanks for sharing this code, it's very useful!

I was wondering if it is possible for other browsers except Safari to give out this "minimal-ui" innerHeight information?

If not, do you have any ideas on how you could get this information in other IOS browsers?

Hi,

Any chance you've got a built version of this handy? Could really do with one to drop into an existing project?

Cheers in advance,

Will

No issues... Honestly, what a shit hot solution! Thanks for coming up with this!

Is this OK for productions sites? No known bugs?

Can someone post a sample Vue implementation?

Hey there, super useful module!

I've noticed that iPad Pro devices are considered Macintosh since they are running on iPadOS. I've been using this module and it worked fine, but still had the issue on iPad. I've fixed it by detecting iPads this way:

function isIpad () {
  const ua = window.navigator.userAgent
  if (ua.includes('iPad')) {
    return true
  }
  if (ua.includes('Macintosh')) {
    try {
      document.createEvent('TouchEvent')
      return true
    } catch (e) {}
  }
  return false
}

...and just updated the code within ios-inner-height where it would skip and return window.innerHeight if the userAgent does not matches /iphone|ipod|ipad/i:

// Non-iOS browsers return window.innerHeight per usual.
// No caching here since browsers can be resized, and setting
// up resize-triggered cache invalidation is not in scope.
/* istanbul ignore if  */
if (!navigator.userAgent.match(/iphone|ipod|ipad/i) && !isIpad()) {
  /**
   * Avoids conditional logic in the implementation
   * @return {number} - window's innerHeight measurement in pixels
   */
  return function () {
    return window.innerHeight
  }
}

I am not sure if I should have created a PR as I'm not sure you want to include that isIpad() function in this module, but it might help if someone is having the same issue as I did... You might have a better solution/fix for including iPadOS for this module.

Hi there,
I was testing this amazing tool on iPhone X, but it seems not working, the innerHeight I got is still contains the url bar on the top and toolbar at the bottom, which more likely is deviceHeight, haven't tested on other ios devices I will report here when I do.

Maybe providing an real working example for this module ?

Hey there! I think your Package is quite useful when it come to deal with the ios safari tabbar... however i would like to have an option to get the smaller version of the innerHeight...the one on the initial page load.. cheers justus

100vh on other iOS browsers, except Safari, give the same value as window.innerHeight. Is there a workaround for those?