tylerjpeterson / ios-inner-height Goto Github PK

Retrieve a consistent, accurate window.innerHeight measurement from iOS

JavaScript 56.56% CSS 28.63% HTML 14.81%

ios-inner-height's Introduction

ios-inner-height

Retrieve a consistent, accurate window.innerHeight measurement from iOS

iOS Safari has a neat feature that results in window.innerHeight providing different values based on whether or not the URL control and menu bar are expanded. This is the case when a page initially loads - or if the page content is shorter than the screen. As a user scrolls, the menu bar retracts beneath the perceivable screen and the URL control shrinks to increase the amount of the page now visible to the user.

For a better explanation, read "The iOS Safari menu bar is hostile to web apps: discuss".

This can get super annoying super quick when one wants to know the scrolled viewport height sans expanded URL and menu bar for, say, measuring an element's percentage in view. It seems the most reliable way to determine the window's inner height regardless of Safari's current scroll state is to inject an element into the DOM, set its height to 100vh, measure it, and destroy it.

This module provides a consistent pixel measurement for the state of iOS Safari having no menu bar and a collapsed URL control, independent of its actual state.

Example output

From an iOS device, load the example page. This page reports the current height returned by this module and by calling window.innerHeight.

reporter	page load	after scroll	orientation change
`ios-inner-height`	`628px`	`628px`	`375px`
`window.innerHeight`	`559px`	`628px`	`375px <= => 331px`

Measurements upon initial load and after scroll.

Measurements upon initial load and after scroll (landscape).

Installation

Install via npm:

$ npm i -S ios-inner-height

Usage as a module

The module exposes a getter that can be called as often as you like. It will automatically account for the window's current orientation. And all measurements are done upon instantiation, so future calls should introduce zero DOM overhead.

var innerHeight = require('ios-inner-height');

// now anytime you need it, get a reliable window height
console.log(innerHeight());

Built file usage

A built file and its minififed version are included in the dist folder. This is a standard browserify standalone file. This file will work with other module systems and sets iosInnerHeight as a global method if no module system is found.

<!doctype html>
<html>
<head>
  <title>iOS Inner Height</title>
</head>
<body>
  <p>iosInnerHeight measurement: <span id="measurement"></span></p>
  <script src="some-path/ios-inner-height.js"></script>
  <script>
    var el = document.getElementById('measurement');
    setInterval(function () {
      el.textContent = iosInnerHeight() + 'px';
    }, 100);
  </script>
</body>
</html>

Known issues

Tests are pretty horrible. Searching for a headless version of iOS Safari.

Resources

The Safari team's perspective.
Article "The iOS Safari menu bar is hostile to web apps: discuss"
Busting require's cache for testing with proxyquire

ios-inner-height's People

Contributors

Stargazers

Watchers

Forkers

mayt gorpacrate ericgroom sevenprinciplesmobility pkshatech-y-himukai copperdesign peterlyshak formfunfunction etterstudio maryasych mmoore99 lukaszmn-forks surik266 treefin emre-dogan

ios-inner-height's Issues

innerHeight on iPhone X

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 ?

userAgent.match(/iphone|ipod|ipad/i) for iPad Pro fails

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.

Possibility to get the smaller innerHeight

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

This is great!

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

Is this OK for productions sites? No known bugs?

Bootstrap Onepager

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

Cheers in advance,

Will

IOS other Browser

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?