Skip to content
SilktideHelp

Orientation lock

Silktide checks that your pages don't force visitors to hold their device a particular way. A page should work in both portrait and landscape, because some people cannot rotate their screen.

Two common patterns lock a page's orientation: code that calls the browser's orientation-lock feature, and styles that hide the whole page with a "please rotate your device" message until the device is turned.

Why this matters

Many people physically cannot rotate their device: a tablet mounted on a wheelchair, a phone in a fixed stand, or a screen attached to hardware is often installed in one orientation permanently. Others have limited grip or motor control that makes rotating a device difficult. For these visitors, a page that insists on one orientation is simply unusable - they see a blank screen or a rotate prompt they can never satisfy.

How to fix it

  1. Remove code that locks orientation, such as calls to screen.orientation.lock():
// Problem: forces landscape and fails for users who cannot rotate
screen.orientation.lock("landscape");
  1. Remove styles that blank the page in one orientation:
/* Problem: hides everything until the device is rotated */
@media (orientation: portrait) {
  body { display: none; }
}
  1. Instead, design the layout to adapt to both orientations. Orientation media queries are fine for adjusting layout - just never for hiding the page.

How Silktide tests this

  1. Examine the scripts embedded in each page, and report any that call an orientation-lock function such as screen.orientation.lock() or the older lockOrientation().
  2. Examine the styles embedded in each page, and report any orientation media query that hides the entire page by setting display: none on the page body.
  3. Styles that merely adapt the layout per orientation are not reported - is not a lock.

Troubleshooting

My orientation lock is in an external file

Silktide examines the scripts and styles embedded in the page itself. A lock applied from a separate script or stylesheet file is not detected, but it affects visitors just the same - the guidance above still applies.

My content genuinely needs one orientation

A few things are essential in one orientation - a piano app or a bank check scanner, for example. If yours qualifies, you can the finding.

Learn more

Last updated

Was this page helpful?