Go to overview: Test development and standards

Turn screen to portrait orientation!

Using CSS to serve a warning to users when screen has landscape orientation (bad practice!)

Detlev Fischer, (detlev [dot] fischer [ at ] testkreis [dot] de)

Twitter: @wcagtest

Last update: 1 March 2019

This example uses CSS media queries media="screen and (orientation: landscape)" and media="screen and (orientation: portrait)"> to serve a warning message when landscape orientation is detected.

Example form MDN

This example demonstrates that setting the orientation with ChromDev Tools has an observable effect on content

Compare Device orientation Example at MDN