EN
此内容没有您的语言版本,但有英语版本。

@-ms-viewport rule

Specifies properties that describe the viewport.

Internet Explorer 10

 

Syntax

@-ms-viewport { viewport-properties }

Parameters

viewport-properties

One or more property declarations, each with a trailing semicolon. Only the following viewport properties are supported.

ValueMeaning
width

Indicates the preferred viewport width used in determining the size of the initial containing block. Can be one of the following values:

auto

The value is calculated based on the display device's normal mode of operation.

device-width

The width of the screen in CSS pixels at a zoom factor of 100%.

device-height

The height of the screen in CSS pixels at a zoom factor of 100%.

length

A positive absolute or relative length.

percentage

A positive percentage value relative to the width or height of the initial viewport at a zoom factor of 100%, for horizontal and vertical lengths respectively.

height

Indicates the preferred viewport width used in determining the size of the initial containing block. See width for a list of possible values.

 

Standards information

Remarks

You can use the @-ms-viewport rule in tandem with media queries to help optimize your layout. Typically, you nest the @-ms-viewport rule inside the media query, as shown in the following pseudocode snippet:

@media [media query logic here] {
  @-ms-viewport {
    [viewport properties here]
  }
  [CSS for this layout combination here]
}

Examples

Internet Explorer Test Drive demo: Make it Snappy!

The following example shows a common use for the @-ms-viewport rule.

Any viewport smaller than 400 pixels in width is laid out to a width of 320 pixels and scaled to fit. The CSS listed underneath it (which has presumably been optimized for a small screen) will be applied.


@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
}

The following example shows basic usage of the @-ms-viewport rule, without any media query (indicating the rule applies in all cases).

This example might be used, for instance, in a Windows Store app using JavaScript. It specifies that, regardless of the resolution of the display or the display ratio (4:3, 16:9 widescreen, and so on), the displayed content (the "viewport") must always contain, at minimum, 1024 pixels by 768 pixels. In the case of a display that is, for instance, 1920 pixels by 1080 pixels (16:9 widescreen ratio), the viewport is scaled up to fit the display's height. Because it is a widescreen display, the application can be centered using normal CSS methods for a "pillarboxing" effect (black bars on both sides of the viewport). On a 1280×960 display, because its aspect ratio is equal to that of the 1024×768 viewport, the viewport would scale up to fill the display completely.


@-ms-viewport {
  width: 1024px;
  height: 768px;
}

We can expand this example by adding media queries that allow for both landscape and portrait modes in this app. This example does effectively the same thing as the previous example, except that the portrait orientation is accounted for in the second @media rule. In the case of portrait mode, the orientation of the content might change (text and pictures might be laid out differently to account for the difference in direction), but the viewport stays the same. The width and height values have been swapped, so the visible content area doesn't change.


@media screen and (orientation: landscape) {
  @-ms-viewport {
    width: 1024px;
    height: 768px;
  }
  /* CSS for landscape layout goes here */
}

@media screen and (orientation: portrait) {
  @-ms-viewport {
    width: 768px;
    height: 1024px;
  }
  /* CSS for portrait layout goes here */
}

Following is an example of a page whose scaling behavior has been optimized for width using media queries and @-ms-viewport. Notice that each media query covers a different resolution range. Within each range, the @-ms-viewport rule specifies what width any device that falls within that range should scale to. The CSS that follows each rule then defines exactly how to display the content that has been scaled for that resolution range.


@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
  /* CSS for 320px layout goes here */
}

@media screen and (min-width: 400px) and (max-width: 640px) {
  @-ms-viewport { width: 400px; }
  /* CSS for 400px layout goes here */
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
  @-ms-viewport { width: 640px; }
  /* CSS for 640px layout goes here */
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
  @-ms-viewport { width: 1024px; }
  /* CSS for 1024px layout goes here */
}

@media screen and (min-width: 1366px) {
  /* CSS for 1366px layout goes here */
}

By default, Internet Explorer automatically scales content when the window is narrower than 1024px. If the @-ms-viewport rule is specified, it overrides default scaling.

In cases where scaling is not needed or desired, the device-width keyword can be used. This keyword signifies that the page is optimized to work well regardless of the dimensions of the window.

When using this keyword, make sure that the page continues to work well in a variety of window size.


@-ms-viewport { width: device-width; }

See also

Device adaptation

 

 

显示:
© 2014 Microsoft