responsive/orientation

Why

Some people have their tablet or phone mounted in one orientation (on a wheelchair, for example) and cannot turn it. A "please rotate your device" screen, a CSS rotation trick or screen.orientation.lock() shuts them out.

Fix

Let the layout adapt to both orientations with fluid layout and media or container queries. Remove rotate-your-device overlays, @media (orientation: portrait) rules that hide the main content, and orientation locks in scripts or the web app manifest, unless the orientation is essential (a piano app, a bank cheque scan).

Examples

/* bad */
@media (orientation: portrait) { main { display: none; } .rotate-message { display: block; } }
/* good */
@media (orientation: portrait) { .gallery { grid-template-columns: 1fr; } }

Sources

• WCAG 2.2, Understanding SC 1.3.4 Orientation
• MDN, ScreenOrientation lock()

Read it in the terminal

npx github:dawidolko/frontend-skills explain responsive/orientation