A cross-browser script to detect the existence of a device notch
npm install notch-detected-event 
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 data-notch="true" and data-orientation="portrait|landscape" will be added to the element:
``html`
This allows you to modify the UI at runtime using CSS, ideal for progressive web apps.
Add notch-detected-event.min.js to your page and update your CSS:
`css
/ make room for the notch at the top /
html[data-notch][data-orientation="portrait"] body {
padding-top: 44px;
height: calc(100% - 44px);
}
/ make room for the notch at the sides /
html[data-notch][data-orientation="landscape"] body {
padding-left: 44px;
padding-right: 44px;
width: calc(100% - 44px - 44px);
}
`
Or listen for the event and execute some logic:
`js`
window.addEventListener('notch-detected', function(e) {
console.log("Notch detected, move shit around");
});
1. Fork it!
2. Create your feature branch: git checkout -b my-new-featuregit commit -m 'Add some feature'
3. Commit your changes: git push origin my-new-feature
4. Push to the branch:
5. 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.
`bash`
git clone https://github.com/john-doherty/notch-detected-event
cd notch-detected-event
npm install
npm start
To 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:
`bash``
npm run build
Star the repo if you find this as it helps me prioritize which open source bugs I should tackle first.
This script was inspired by SO thread detecting mobile device “notch”.
For change-log, check releases.
Licensed under MIT License © John Doherty