A 0.7k script that fires a notch-detected event if the device has a notch (currently iPhone X, XS, XR, XS Max and Google Pixel 3). If detected a HTML5 data attribute will be added to the <html> element:
<html data-notch="true">Allows you to modify the UI at runtime using CSS:
/* make room for the notch at the top */
@media screen and (orientation: portrait) {
html[data-notch="true"] {
padding-top: 44px;
height: calc(100% - 44px);
}
}
/* make room for the notch at the sides */
@media screen and (orientation: landscape) {
html[data-notch="true"] {
padding-left: 44px;
padding-right: 44px;
width: calc(100% - 44px - 44px);
}
}Or listen for the notch-detected event and execute some logic:
window.addEventListener('notch-detected', function(e) {
console.log("Notch detected, move shit around");
});Add notch-detected-event.min.js to your app/page.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request
The project includes everything needed to develop/test. Run the following then visit http://your-local-ip:8080 on your mobile device or emulator.
git clone https://github.com/john-doherty/notch-detected-event
cd notch-detected-event
npm install
npm startTo create a new version of the minified notch-detected-event.min.js file from source, tweak the version number in package.json and run the following:
npm run buildIf you find this useful, please star the repo as it helps me prioritize open source bug fixes.
For change-log, check releases.
Licensed under MIT License © John Doherty