メモログ

viewportをCSSで指定する

Internet Explorer 10 Guide for Developers のDevice adaptationにて、@viewport についての説明がされています。現時点では ms の prefix が必要なので、実際に使用する場合は @-ms-viewport ということになる(そして@-o-viewport の形でOpera でも対応しているBruce Lawsonからコメントがついている)。

@viewport の仕様はW3Cにある。introduction には viewport の指定を CSS で標準化することが書いてあり、いずれは meta タグではなく CSS に記述するものになるかもしれない。

Additionally, an HTML META tag has been introduced for allowing an author to specify the size of the initial containing block, and the initial zoom factor directly. It was first implemented by Apple for the Safari/iPhone browser, but has since been implemented for the Opera, Android, and Fennec browsers. These implementations are not fully interoperable and this specification is an attempt at standardizing the functionality provided by the viewport META tag in CSS.

CSS と meta タグの両方が書かれている場合はどのように処理されるのかなというのが、若干気になったのですが、10.4. Translation into @viewport propertiesあたりにその辺のことが書かれている。

The Viewport META element is placed in the cascade as if it was a STYLE element, in the exact same place in the dom, that only contains a single @viewport rule.

meta タグは style 要素に@viewport のルールが書かれているかのように扱われると。なので、

<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" href="/styles.css" type="text/css" />

という風に head に記述されていたら、

<style>
@viewport {
  width: device-width;
  zoom: 1.0;
}
</style>
<link rel="stylesheet" href="/styles.css" type="text/css" />

というように扱われる、と思われる。meta の記述が CSS よりも上にある場合は、CSS に記述された@viewport ルールが優先されると思われるけど、meta の方が下に書かれている場合は meta の指定の方が効いてくるかもしれない(試してないので確証はない…)。

私について

Yutaka Yamaguchi
東京在住。TypeScript, Node.js, Reactなどフロンエンドが主力。Perlも書く。SwiftやRubyも過去には使ってた。過去のTOEIC 860くらい。