From 610c333b45ce0c5da3cebc27b00b37e458d53498 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 2 Jul 2021 23:36:25 +0900 Subject: Web/CSS/@viewport を更新 (#1277) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Web/CSS/@viewport を更新 - 英語版で削除された conflicting 版の記事を削除 - 2021/05/08 時点の英語版を同期 * ファイルが削除できていなかったのを削除 --- files/ja/web/css/@viewport/index.html | 55 +++++++++++++++++++---------------- 1 file changed, 30 insertions(+), 25 deletions(-) (limited to 'files/ja/web/css/@viewport') diff --git a/files/ja/web/css/@viewport/index.html b/files/ja/web/css/@viewport/index.html index 3b68effd7d..9df15a0789 100644 --- a/files/ja/web/css/@viewport/index.html +++ b/files/ja/web/css/@viewport/index.html @@ -11,11 +11,12 @@ tags: - Reference - Screen Layout - viewport +browser-compat: css.at-rules.viewport translation_of: Web/CSS/@viewport ---
{{CSSRef}}{{deprecated_header}}
-
+

: https://github.com/w3c/csswg-drafts/issues/4766 に @viewport を標準路線から除外することに関する議論があります。

@@ -25,7 +26,7 @@ translation_of: Web/CSS/@viewport

モバイル端末 (または全画面モードのデスクトップ端末) では、初期ビューポートはふつう端末の画面のうちアプリケーションが利用できる部分です。これは全画面の場合もあれば、全画面からオペレーティングシステムが制御する領域 (タスクバーなど) を引いた部分の場合、アプリケーションが利用できる画面領域 (全画面又は画面からオペレーティングシステムやその他のアプリケーションが所有する領域を引いた部分) の場合もあります。

-
@viewport {
+
@viewport {
   width: 100vw; /*実際のビューポートの幅を端末の幅に設定*/
 }
 
@@ -34,52 +35,52 @@ translation_of: Web/CSS/@viewport

メモ: <meta name="viewport"> タグを使用すると、 @viewport より優先します。

-

構文

+

構文

このアット規則は波括弧で囲まれた CSS ブロック内に、一連の入れ子になった{{glossary("descriptor (CSS)", "記述子")}}を含みます。

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

-

記述子

+

記述子

現時点では @viewport のブラウザーの互換性は弱く、対応は Internet Explorer 及び Edge で広く行われています。これらのブラウザーでも、少数の記述子しか利用できません。 @viewport は対応していないブラウザーからは無視され、理解できない記述子は無視されるでしょう。

-
min-width
+
min-width
文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。
-
max-width
+
max-width
文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。
-
width
+
width
min-widthmax-width の両方を設定するための一括指定です。
-
min-height
+
min-height
文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。
-
max-height
+
max-height
文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。
-
height
+
height
min-heightmax-height の両方を設定するための一括指定です。
-
zoom
+
zoom
ズームの初期値を設定します。
-
min-zoom
+
min-zoom
ズームの最小値を設定します。
-
max-zoom
+
max-zoom
ズームの最大値を設定します。
-
user-zoom
+
user-zoom
ユーザーがズーム倍率を変更できるか否かを制御します。
-
orientation
+
orientation
文書の向きを制御します。
-
{{cssxref("@viewport/viewport-fit", "viewport-fit")}}
+
viewport-fit
長方形ではないディスプレイでの文書の表示を制御します。
-

形式文法

+

形式文法

{{csssyntax}} -

+

-

ビューポートの大きさ、拡大率、向きの設定

+

ビューポートの大きさ、拡大率、向きの設定

-
@viewport {
+
@viewport {
   min-width: 640px;
   max-width: 800px;
 }
@@ -94,7 +95,7 @@ translation_of: Web/CSS/@viewport
   orientation: landscape;
 }
-

仕様書

+

仕様書

@@ -108,7 +109,7 @@ translation_of: Web/CSS/@viewport - + @@ -118,15 +119,19 @@ translation_of: Web/CSS/@viewport
{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}} {{Spec2("CSS Round Display")}}{{cssxref("@viewport/viewport-fit", "viewport-fit")}} 記述子を定義。viewport-fit 記述子を定義。
{{SpecName('CSS3 Device', '#atviewport-rule', '@viewport')}}
-

ブラウザーの互換性

+

ブラウザーの互換性

+<<<<<<< Updated upstream

{{Compat("css.at-rules.viewport")}}

+======= +

{{Compat}}

+>>>>>>> Stashed changes -

関連情報

+

関連情報

-- cgit v1.2.3-54-g00ecf