@viewport

by 1 contributor:

This translation is incomplete. Please help translate this article from English.

概要

CSS の @viewport  @-規則 は、複数のメディア特性をもつ CSS 宣言ブロックを含みます。CSS 宣言ブロックは、波括弧 { ... } で囲まれます。これらのメディア特性は、主にモバイルデバイスでのビューポート設定を制御します。

構文

(この記事はまだ作成中です。構文が何も書かれていません)

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

 

zoom の値 1.0 または 100% がズーム無しに相当します。より大きい値はズームイン、より小さい値はズームアウトになります。

メディア特性(Descriptors)

ブラウザは、認識できないメディア特性を無視するでしょう。

min-width
文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。
max-width
文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。
width
min-width と max-width の両方を設定するためのショートハンドです。
min-height
文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。
max-height
文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。
height
min-height と max-height の両方を設定するためのショートハンドです。
zoom
ズームの初期値を設定します。
min-zoom
ズームの最小値を設定します。
max-zoom
ズームの最大値を設定します。
user-zoom
ユーザーがズームの値を変更できるか否かを制御します。
orientation
文書の向きを制御します。

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

仕様書

仕様書 策定状況 コメント
CSS Device Adaptation
The definition of '@viewport' in that specification.
草案  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 29 (behind a flag) 未サポート 10 -ms 11.10
Removed in 15
Reintroduced behind a flag in 16
未サポート
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 4.4 29 未サポート 10-ms[1] 11.10
Removed in 15
Reintroduced behind a flag in 16
未サポート

[1] Windows Phone 8 の古いバージョンにある IE モバイル 10 は、 device-width のところに不具合がある。 @-ms-viewport を使ったとき、物理的なピクセルによる画面幅ではなく、CSS ピクセルとして評価してしまう。これは仕様書に誤って従ったものである。しかし、<meta> タグに viewport を書いたときは、device-width は正しく評価される。Microsoft によると、この不具合は Windows Phone 8 アップデート 3 (通称 GDR3) で解消している。だが、Lumia Black GDR3 アップデート(Nokia Lumia向けのGDR3)では、不具合が解消していないという報告がある。(少なくとも Lumia 920 では) より詳しい情報と応急処置は Tim Kadlec のブログ記事 "Windows Phone 8 and Device-Width" を参照。

関連情報

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

Contributors to this page: storywriter
最終更新者: storywriter,