f:id:namikuguri:20180129134525p:plain

@viewport については、まだサポートしているブラウザが少ないので使えない。どんなものかというと、これまで HTML の meta タグでやってたビューポートの指定が CSS でもできるようになるよ、くらいの理解。

ビューポートが見た目を表すための指定かと問われると、そんな気もする。見た目を指定するものであれば CSS で指定したいという気持ちにもなってくるので、サポートが広がれば @viewport を使いたい。

@viewport がサポートされると、これまで HTML で以下のようにビューポートの指定をしていたのが、

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS の @viewport を使って以下のように書けるようになる。initial-sacle=1 の指定と zoom: 1 は同じ意味を持つ。

@viewport {
  width: device-width;
  zoom: 1;
}

@viewport がサポートされたときに、ビューポートの指定が HTML と CSS の両方で指定されてひと目では気づかないくらいの不具合がでる、みたいな地獄はできれば見たくない。

参考

nlog