This is a demo of how to detect screen orientation via CSS (no JavaScript).
In addition to detecting it, this page also shows real examples of how to use that information.
First, you should know:
- portrait = when the page width is greater than the page height
- landscape = when the page height is greater than the page width
If you're using a traditional computer, you can see the difference by resizing your browser window up and down.
If you're using a mobile device, you can see the difference by turning your device.
Landscape Mode
You are now viewing in landscape mode; the background color is light pink (actually 'mistyrose').
Portrait Mode
You are now viewing in portrait mode; the background color is light blue (actually 'lightcyan').
• View the source of this web page to get the code needed to reproduce the feature explained. •
