Is there a CSS-only solution yet to differentiate rotate-left-landscape from rotate-right-landscape?
We've got orientation, but not left or right.
@media screen and (orientation:landscape) /* true for both left and right */
If I want to build around an iPhone notch, safe areas help but are activated on both sides. E.g. if you rotate an iPhone left, both left and right insets activate. But I only care about the notch side. I'd like to use the extra 47px on the other.
/* If we rotate phone 90deg left */
env(safe-area-inset-left) /* shows 47px */
env(safe-area-inset-right) /* shows 47px */
We've had the JS orientation api since 2007!
window.orientation // 90
// Deprecated
window.addEventListener("orientationchange", () => {
// update styles, add remove css classes, etc
}, false);
window.onorientationchange = (event) => {
console.log("the orientation of the device is now " + event.target.screen.orientation.angle);
};