「initial-scale = 1.0」も設定されている場合にビューポートメタタグから「width = device-width」を削除することの副作用

一方で<meta name="viewport">、タグが標準化されていないですが、それは「原因事実上の支配にほとんどの携帯ブラウザで尊敬されています。」

真のWeb標準ではないことの欠点の1つは、詳細なドキュメントが他の標準ほど利用できないことです。CSSワーキンググループは、このための仕様を持っているので、それは私が主に権威の作品として使用していますものです。

私の主な質問は：

次の宣言の違いは何でしょうか？

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

<meta name="viewport" content="initial-scale=1.0">

あるいは、これらの2つの@viewport CSS at-rules の違いは何ですか？

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}

/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

これらの@viewport翻訳に到達した方法：

width=device-width に min-width: extend-to-zoom; max-width: 100vw;

CSSデバイス適応モジュールレベル1のドキュメントの状態：

widthおよびheightビューポート<META>プロパティは翻訳さwidth及びheight設定、記述子min-width/ min-heightの値extend-to-zoom及びmax-width/ max-heightビューポートの長さの値を。

彼らはさらに例を挙げます：

この<META>要素：

<meta name="viewport" content="width=500, height=600">

に変換されます：

@viewport {
    width: extend-to-zoom 500px;
    height: extend-to-zoom 600px;
}

width速記記述子はように記述されています。

これは、min-widthとの両方を設定するための略記max-widthです。1つの<viewport-length>値で両方min-widthとその値が設定max-widthされます。2つの<viewport-length>値がmin-width最初の値とmax-width2番目の値に設定されます。

したがって、それはwidth: extend-to-zoom 500px;と同等の理由になりmin-width: extend-to-zoom; max-width: 500px;ます。

それだけでは残りません100vw。セクション10.4内で、彼らは説明します：

device-widthそして、device-heightそれぞれ100vwと100vhに変換します

これで、がどのようwidth=device-widthにに変換されるかを最終的に確認できmin-width: extend-to-zoom; max-width: 100vw;ます。

initial-scale=1.0 に zoom: 1.0; width: extend-to-zoom;

これは逐語的な例です：

この<META>要素：

<meta name="viewport" content="initial-scale=1.0">

に変換されます：

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

私がここに持っている他の質問は、正確には何の価値ですか？extend-to-zoom

それに関する文書とその解決手順は把握するのが困難です。誰かが私にこれに関するいくつかのさらなる例に私を向けることができるならば、それは大いに感謝されるでしょう。

上記のすべてに加えて、いくつかのビューポート構成をテストするために、クイックサイト（https://romellem.github.io/temp-site/viewport/）をまとめました。

つまり：

• content = "width = device-width、initial-scale = 1.0"
• content = "initial-scale = 1.0"

これはテストに役立ちます。

質問の内容を説明する前viewportに、まずメタタグが存在する理由について少し確認しましょう。これが私が集めたものです。

なぜviewportタグが必要なのですか？

ビューポートは、Webコンテンツを表示できる領域です。通常、レンダリングされたページ（Webコンテンツ）はビューポートよりも大きくなります。その結果、通常はスクロールバーを使用して非表示のコンテンツを表示します（ビューポートではすべてを表示できないため）。CSSデバイス適応モジュールレベル1から引用：

狭いビューポートは、デスクトップブラウザで見栄えがするように設計されたドキュメントの問題です。その結果、モバイルブラウザーベンダーは、ビューポートサイズとは異なり、一般的なデスクトップブラウザーウィンドウのブロックサイズに近い固定の初期ブロックサイズを使用します。ズームは、スクロールやパンに加えて、ドキュメントの概要を変更したり、ドキュメントの特定の領域を拡大して読んだり操作したりするためによく使用されます。

モバイルデバイス（およびその他の小さなデバイス）では、最初の包含ブロックは通常、ビューポートよりも大きくなります。たとえば、画面幅がのモバイルデバイスには、640pxの最初の包含ブロックがある場合があり980pxます。この場合、最初の包含ブロックは640px、モバイル画面に収まるように縮小されます。この640px幅（画面の幅）はinitial-width、ビューポートと呼ばれるものであり、ここでの説明に関係します。

では、なぜこのviewportタグが必要なのですか？さて、今日では、モバイルデバイス用に設計できるメディアクエリがあります。ただし、このメディアクエリは、実際のビューポートの幅によって異なります。モバイルデバイスでは、ユーザーエージェントは自動的に初期ビューポートサイズを別の固定サイズ（通常、初期ビューポートサイズより大きい）に設定します。したがって、モバイルデバイスのビューポートの幅が固定されている場合、ビューポートの幅が変化しないため、メディアクエリで使用するCSSルールは実行されません。viewportタグを使用して、実際のビューポートの幅を制御できます（UAによってスタイル設定された後）。MDNから引用：

ただし、このメカニズムは、メディアクエリを使用して狭い画面用に最適化されたページにはあまり適していません。たとえば、仮想ビューポートが980pxの場合、640pxまたは480px以下で起動するメディアクエリは使用されず、そのような効果は制限されます。レスポンシブデザインテクニック。

viewportタグは、幅だけでなく、実際のビューポートの高さも変更できることに注意してください

viewport タグの width

widthでviewportタグをに翻訳さmax-widthに@viewportルール。widthas を宣言するとdevice-width、ルールでに変換さ100%れ@viewportます。パーセンテージ値はinitial-width、ビューポートのに基づいて解決されます。したがって、上記の例をまだ使用している場合、max-widthはの値に解決されます640px。ご存知のとおり、これはのみを指定しmax-widthます。min-width自動的になりますextend-to-zoom。

extend-to-zoom

あなたの質問は、正確に拡大ズームの価値は何ですか？私が集めたものから、それは与えられたズームレベルで表示領域に合うようにそれ自体を拡張するビューポートをサポートするために使用される値です。つまり、指定されたズーム値に基づいて変化するのは、ビューポートサイズの値です。例？ことを考えるとmax-zoomUAスタイルシートの値がある5.0とinitial-widthされ320px、<meta name="viewport" content="width=10">初期の実際の幅に解決されます64px。これは理にかなっています。デバイスが320ピクセルしかなく5x、通常の値しかズームできない場合、ビューポートの最小サイズはになるため320px divided by 5、一度に64ピクセルしか表示されません（そして 10px32倍ズームが必要になるためです！）。この値はアルゴリズムによって使用され、min-widthおよびmax-width値を拡張（変更）する方法を決定します。これは、実際のビューポートの幅を決定する役割を果たす。

すべてを一緒に入れて

だから、基本的に、違いは何だ<meta name="viewport" content="width=device-width, initial-scale=1.0">とは<meta name="viewport" content="initial-scale=1.0">？アルゴリズムのステップ（thisとthis）をやり直すだけです。width最初に後者（属性のないもの）から始めましょう。（initial-widthビューポートのはであると想定し640pxます。）

• widthで、この結果を設定されていないmax-widthとmin-widthされてextend-to-zoomで@viewportのルール。
• initial-scaleです1.0。これは、zoom値も1.0
• 解決extend-to-zoomしよう。手順：
  1. extend-zoom = MIN(zoom, max-zoom)。MIN操作は、非値に解決しますauto。ここで、zoomある1.0とmax-zoomされますauto。これextend-zoomは1.0
  2. extend-width = initial-width / extend-zoom。これは簡単; あなたが得る1除算640はextend-width同じであり640
  3. extend-zoomはでないためauto、2番目の条件にスキップします。max-widthは確かにextend-to-zoom、これはmax-widthに設定されることを意味しextend-widthます。したがって、max-width = 640
  4. min-widthまたextend-to-zoom、これはに設定min-widthすることを意味しますmax-width。我々が得るmin-width = 640
• およびの非auto（つまりextend-to-zoom）値を解決した後。次の手順に進みます。またはではないので、手順の最初のを使用して、最初の実際のビューポートをに設定します。これはに相当します。これは、最初の実際のビューポートに解決されますmax-widthmin-widthmin-widthmax-widthautoifwidthMAX(min-width, MIN(max-width, initial-width))MAX(640, MIN(640, 640))640width
• 移動し、次の手順。このステップでwidthは、ではありませんauto。値は変更されず、実際のビューポートwidthは640px

前者をやってみましょう。

• widthこの結果はでは、設定されmax-widthている100%（640px私たちの場合）とmin-widthされてextend-to-zoomで@viewportのルール。
• initial-scaleです1.0。これは、zoom値も1.0
• 解決extend-to-zoomしよう。あなたは慎重に（上記とほぼ同じ）の手順に従った場合は、で終わるだろうmax-widthの640pxとmin-widthの640px。
• あなたはおそらく今パターンを見ることができます。の実際のビューポート幅を取得し640pxます。

では、知覚される違いは何ですか？基本的になし。どちらも同じことをします。私の説明が役に立てば幸い;-)何かが間違っていた場合は、教えてください。