orientation

Jump to: navigation, search

orientation

This article is In Progress.

W3C Recommendation

Summary

The 'orientation' media query is used to show whether the height is greater (portrait) or the width (landscape).


Description

The orientation media query reports whether the width (landscape) or the height (portrait) is greater.

Syntax

  • orientation: portrait | landscape

Values

portrait | landscape

Value for the orientation of a device must be either portrait or landscape.

Examples

CSS

@media (orientation:landscape){
   /*This is only executed when the width is greater than the height*/
   body{
       background-image:url(landscape.png);
   }
}
@media (orientation:portrait){
   /*This is only executed when the width is less than the height*/
   body{
       background-image:url(portrait.png);
   }
}



Related specifications

Specification Status Related Changes
Media Queries Level 4 Working Draft
Media Queries Recommendation