tylerjpeterson / ios-inner-height Goto Github PK
View Code? Open in Web Editor NEWRetrieve a consistent, accurate window.innerHeight measurement from iOS
Retrieve a consistent, accurate window.innerHeight measurement from iOS
Can someone post a sample Vue implementation?
100vh on other iOS browsers, except Safari, give the same value as window.innerHeight. Is there a workaround for those?
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,
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
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,
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?
No issues... Honestly, what a shit hot solution! Thanks for coming up with this!
Is this OK for productions sites? No known bugs?
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
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 ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.