# ios-inner-height

> Retrieve a consistent, accurate `window.innerHeight` measurement from iOS

Latest version **1.1.1** (published 2019-07-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install ios-inner-height
pnpm add ios-inner-height
yarn add ios-inner-height
bun add ios-inner-height
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2019-07-11 |
| First published | 2017-06-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=0.10.3 |
| Dependencies | 0 |
| Unpacked size | 15.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 195 |
| Author | Tyler Peterson |
| Maintainers | tylerjpeterson |
| Keywords | ios, safari, innerHeight, innerWidth |

## Links

- npm: https://www.npmjs.com/package/ios-inner-height
- Repository: https://github.com/tylerjpeterson/ios-inner-height
- Issues: https://github.com/tylerjpeterson/ios-inner-height/issues
- npm.io page: https://npm.io/package/ios-inner-height

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2019-07-11
- 1.1.0 — 2018-07-26
- 1.0.3 — 2018-03-28
- 1.0.2 — 2018-01-04
- 1.0.1 — 2017-11-21
- 1.0.0 — 2017-06-08

## README

# 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"](https://benfrain.com/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`  |


![alt text](https://kettle-modules.s3.amazonaws.com/ios-inner-height/ios-1.png)
![alt text](https://kettle-modules.s3.amazonaws.com/ios-inner-height/ios-2.png)

*Measurements upon initial load and after scroll.*

![alt text](https://kettle-modules.s3.amazonaws.com/ios-inner-height/ios-3.png)
![alt text](https://kettle-modules.s3.amazonaws.com/ios-inner-height/ios-4.png)

*Measurements upon initial load and after scroll (landscape).*


## Installation
Install via npm:

```sh
$ 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.

```javascript
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`](https://github.com/browserify/browserify) standalone file.
This file will work with other module systems and sets `iosInnerHeight` as a global method if no module system is found. 

```html
<!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](https://bugs.webkit.org/show_bug.cgi?id=141832).
- Article ["The iOS Safari menu bar is hostile to web apps: discuss"](https://benfrain.com/the-ios-safari-menu-bar-is-hostile-to-web-apps-discuss/)
- Busting `require`'s cache for testing with [proxyquire](https://github.com/thlorenz/proxyquire)

---
_Source: https://npm.io/package/ios-inner-height · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._