iOS Size Classes in CSS
Overview
This script applies CSS classes to the body
to mimic iOS Size Classes.
It can be used for single-page applications or to take into account the height of the window in landscape mode.
Pull requests are welcome!
Demo
Quickstart
Add size-classes.min.js to your page
body
Classes applied to sc-wc
when the width of the window is compactsc-wr
when the width of the window is regularsc-hc
when the height of the window is compactsc-hr
when the height of the window is regular
Similar to Xcode, this script does not only use the width of the window to choose the class to apply.
Browser Support
- Chrome
- Firefox
- Safari
Probably Edge, Internet Explorer 11+ and Opera too.
Todo
- Fine-tune the breakpoints for a web-first experience
- Publish to npm
License
Apache 2.0