mozilla
Your Search Results

    @viewport

    この記事はまだ日本語に翻訳されていません。MDN の翻訳はボランティアによって行われています。是非 MDN に登録し、私たちの力になって下さい。

    Summary

    The @viewport CSS at-rule contains a set of nested descriptors in a CSS block that is delimited by curly braces. These descriptors control viewport settings, primarily on mobile devices.

    Syntax

    (This MDN article is currently a stub and lacks a full description of the syntax.)

    @viewport {
      /* viewport-descriptor: viewport-value; */ 
    }

     

    A zoom factor of 1.0 or 100% corresponds to no zooming. Larger values zoom in. Smaller values zoom out.

    Descriptors

    Browsers are supposed to ignore unrecognized descriptors.

    min-width
    Used in the determination of the width of the viewport when the document is first displayed.
    max-width
    Used in the determination of the width of the viewport when the document is first displayed.
    width
    A shorthand descriptor for setting both min-width and max-width
    min-height
    Used in the determination of the height of the viewport when the document is first displayed.
    max-height
    Used in the determination of the height of the viewport when the document is first displayed.
    height
    A shorthand descriptor for setting both min-height and max-height
    zoom
    Sets the initial zoom factor.
    min-zoom
    Sets the minimum zoom factor.
    max-zoom
    Sets the maximum zoom factor.
    user-zoom
    Controls whether or not the user should be able to change the zoom factor.
    orientation
    Control's the document's orientation.

    Examples

    @viewport {
      min-width: 640px;
      max-width: 800px;
    }
    @viewport {
      zoom: 0.75;
      min-zoom: 0.5;
      max-zoom: 0.9;
    }
    @viewport {
      orientation: landscape;
    }

    Specifications

    Specification Status Comment
    CSS Device Adaptation
    The definition of '@viewport' in that specification.
    Working Draft  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 29 (behind a flag) Not supported 10 -ms 11.10
    Removed in 15
    Reintroduced behind a flag in 16
    Not supported
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 4.4 29 Not supported 10-ms[1] 11.10
    Removed in 15
    Reintroduced behind a flag in 16
    Not supported

    [1] There is a bug in IE Mobile 10 on older versions of Windows Phone 8, where device-width, when used within @-ms-viewport, evaluates to the screen width in physical pixels rather than normalized CSS pixels, which is wrong according to the specification. However, when used within a viewport <meta> tag, device-width evaluates correctly. According to Microsoft, this bug was fixed in Windows Phone 8 Update 3 (a.k.a. GDR3), although there are some reports that the Lumia Black GDR3 update did not fix the bug (at least on the Lumia 920). For more details and a workaround, see Tim Kadlec's blog post "Windows Phone 8 and Device-Width".

    See also

    ドキュメントのタグと貢献者

    Contributors to this page: jswisher, cvrebert, miller9904, Sebastianz, teoli, nishs, hexalys
    最終更新者: Sebastianz,