Media Features for setting conditions in Media Queries | ||||
Feature | Value | Min/Max | Description | |
width | Length | Yes | Width of display area | |
heigh | Length | Yes | Height of display area | |
device-width | Length | Yes | Width of rendering area | |
device-height | Length | Yes | Height of rendering area | |
orientation | portrait or landscape | No | Orientation of device | |
aspect-ratio | Ratio | Yes | Ratio of width to height | |
device-aspect-ratio | Ratio | Yes | Ratio of device-width to device-height | |
color | Integer | Yes | Number of bits per color component (if not color, the value is 0) | |
color-index | Integer | Yes | Number of entries in output device's color lookup table | |
monochrome | Integer | Yes | Number of bits per pixel in the monochrome frame buffer (if not monochrome, the value is 0) | |
resolution | Resolution | Yes | Density of pixels of output device | |
scan | progressive or interlace | No | Scanning process used by TV devices | |
grid | 0 or 1 | No | If set to 1, this specifies that the device is grid-based, such as a teletype terminal or a phone display with only one fixed font (all other devices are 0) |
Precede media types with the only keyword to hide them from earlier browsers |
width and height | Dimensions of the viewport, including any scrollbars | |
device-width and device-height | Dimensions of the screen |
You specify the value for a media feature after a colon in the same way you do for a CSS property. Each condition is wrapped in parentheses and added to the media declaration using the keyword and |
media="screen and (min-width: 361px)" |
media="screen and (min-width: 361px) and (max-width: 768px)" |
Some media features, such as color, grid, and monochrome, can be used as conditions without specifying a value. |
Property | Accepted Values | Description | |
width | Integer or device-width | This sets the width of the mobile viewport to the specified number of pixels or to the width of the device. When specifying an actual width, the valid range is 200-10,000 | |
height | Integer or device-height | On iOS, this sets the width of the viewport in landscape orientation to the specified number of pixels or to the height of the device. The valid range is 223-10,000 | |
initial-scale | Number with decimal fraction | This sets the initial scaling factor of the display. The range is determined by the minimum-scale and maximum-scale properties | |
minimum-scale | Number with decimal fraction | The valid range is any number above zero to 10.0. The default is 0.25. | |
maximum-scale | Number with decimal fraction | The valid range is any number above zero to 10.0. The default is 1.6. | |
user-scalable | yes or no | This determines whether the user can zoom the display in and out. The default is yes |