Skip to content

A cross-browser script to detect the existence of a device notch

License

Notifications You must be signed in to change notification settings

john-doherty/notch-detected-event

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 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");
});

Install

Add notch-detected-event.min.js to your app/page.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. 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-event
cd notch-detected-event
npm install
npm 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

If you find this useful, please star the repo as it helps me prioritize open source bug fixes.

History

For change-log, check releases.

License

Licensed under MIT License © John Doherty

About

A cross-browser script to detect the existence of a device notch

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published