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 <html>
element:
This allows you to modify the UI at runtime using CSS, ideal for progressive web apps.
Usage
Add notch-detected-event.min.js to your page and update your CSS:
/* make room for the notch at the top */ /* make room for the notch at the sides */
Or listen for the event and execute some logic:
window;
Contributing
- 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
Development
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-eventcd notch-detected-eventnpm installnpm start
Update .min files
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:
npm run build
Star the repo
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”.
History
For change-log, check releases.
License
Licensed under MIT License © John Doherty