ios-inner-height
Advanced tools
Retrieve a consistent, accurate `window.innerHeight` measurement from iOS
Retrieve a consistent, accurate
window.innerHeightmeasurement 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.
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).
Install via npm:
$ npm i -S ios-inner-height
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());
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>
Tests are pretty horrible. Searching for a headless version of iOS Safari.
require's cache for testing with proxyquireFAQs
Retrieve a consistent, accurate `window.innerHeight` measurement from iOS
The npm package ios-inner-height receives a total of 8,818 weekly downloads. As such, ios-inner-height popularity was classified as popular.
We found that ios-inner-height demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.