ビューポートメタタグは本当に必要ですか？
レスポンシブサイトをいくつか作成しましたが、レスポンシブサイトの開発は初めてです。私のCSSでは、99％の値がemsまたはパーセンテージです。メディアクエリ（max-widthとmax-device-widthの両方）を使用してレイアウトを変更しています。ビューポートメタタグを含めていないため、iOS、多くのAndroid私がテストしたスマートフォンとタブレット、およびすべてのデスクトップブラウザーで完全に動作します。
メタタグを追加すると、サイトが壊れます。私は何か間違ったことをしているか、それを含める必要がないように正しいことをしていますか？それが私のものを壊しているので、なぜそれがベストプラクティスであると思われるのかについて混乱しています。
何か不足していますか？
デスクトップオペレーティングシステムでは、ブラウザーのビューポートの幅はピクセル数に固定されており、Webページのコンテンツはそのまま表示されます。
IOS上のSafari（または当時iOSを呼び出すことになっていたもの）から始めて、モバイルブラウザのビューポートは「仮想」でした。ビューポートは（たとえば）インターフェイスで320物理ピクセルに相当するスペースしか占有しませんが、ブラウザーはより大きく（iOSではデフォルトで980ピクセルの幅）の「仮想」ビューポートを作成し、そこにコンテンツをレンダリングします。次に、デバイスの画面で使用可能な実際の物理ピクセルに収まるまで、その仮想ビューポートをズームアウトします。
ビューポートメタタグを使用すると、この仮想ビューポートのサイズをモバイルブラウザーに伝えることができます。これは、モバイル用にサイトのデザインを実際に変更していない場合に便利であり、仮想ビューポートを大きくしたり小さくしたりすると、より良くレンダリングされます。 （デフォルトで980ピクセルが選択されたのは、2007年に多くの注目度の高いサイトをレンダリングするのに優れていたためです。特定のサイトでは、異なる値の方が良いかもしれません。）
個人的には、常に<meta name="viewport" content="width=device-width, initial-scale=1">仮想ビューポートがデバイスの寸法と一致するようにします。 （ご了承ください - initial-scale=1は、仮想ビューポートをiOSのランドスケープモードに適合させるために必要だと思われます ）。これにより、モバイルブラウザーはデスクトップブラウザーが常に持っているように動作します。
ビューポートメタタグがない場合、サイトはデバイスのデフォルトの仮想ビューポートにレンダリングされます。特にあなたのユニットがすべてemsまたはパーセンテージである場合、それは問題ではないと思います。ただし、特にブラウザーごとにサイズが異なるデフォルトの仮想ビューポートを持つ可能性があるため、任意の時点でピクセル単位で考える必要がある場合は少し混乱するかもしれません。また、その後のメンテナーがアプローチを理解していない場合、混乱を招くかもしれません。
基本フォントサイズをかなり大きく設定して、読みやすいようにしたと思いますか？このように作成したWebサイトの1つにリンクして、例を見ることができますか？
ビューポートを使用しない場合、デバイスは仮想ビューポートを使用します。これは、デフォルトでは実質的にWebサイトの縮小版です。これは、iPhoneで約980ピクセル、andriodで約800ピクセルです。ビューポートを設定してこのズームアウトを無効にするとすぐに、デバイスはWebサイトを適切に処理し、デバイスや向きなどに応じて幅480pxまたは320px程度で測定します。
以下の完全なリソース、私のアドバイスは、レスポンシブおよびモバイルで作業するときは常に、常にビューポートを最初に設定することです。これは、デバイスのズームを正規化し、仮想幅ではなく実際のデバイス幅を使用してサイトを表示するための最良の方法です。
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml
だから自分の質問に答えるために。それは必要ではない。
特定のブレークポイントでデスクトップバージョンのスタイルを設定するには、最小および最大幅のメディアクエリを使用できます。
次に、主にタブレットと携帯電話専用のフォントサイズとその他のプロパティを更新します。私が言ったように、これは主に読みやすさのためにフォントサイズを増やしています。
ただし、この方法には大きな保守性の問題があります。
ビューポートメタタグを使用すると、デスクトップからモバイルデバイスまでの最大幅と最小幅を簡単に使用できます。
ビューポートタグを使用する必要がありますこれらを使用すると、任意の画面の正確なレンダリングサイズやズームレベルを簡単に制御できます（必要に応じて desktop でも）。これにより、あらゆるデバイスのWebサイトを簡単に構築できます。しかし、大きな力には大きな責任が伴うことを知っておいてください。このパワーを賢く使用してください（ズームを無効にしないでください）。
すべてのデバイスに対応しているわけではありませんが、モバイルには対応しています。モバイルブラウザは、通常は画面より広いビューポートである仮想「ウィンドウ」でページをレンダリングするため、すべてのページレイアウトを小さなウィンドウに詰め込む必要がありません（モバイルに最適化されていないサイトとユーザーがズーム）。 Mobile Safariは、「ビューポートメタタグ」を導入して、Web開発者がビューポートのサイズとスケールを制御できるようにしました。現在、すべてのモバイルブラウザーは、Web標準の一部ではないにもかかわらず、このタグをサポートしています。一般的なモバイル向けサイトには、次のタグが含まれている必要があります。
<meta name="viewport" content="width=device-width, initial-scale=1">
Widthプロパティは、ビューポートのサイズを制御します。 100％のスケールでのCSSピクセル単位の画面の幅。initial-scaleプロパティは、ページが最初に読み込まれるときのズームレベルを制御します。最大スケール、最小スケール、およびユーザーがスケーラブルなプロパティは、ユーザーがページをズームインまたはズームアウトする方法を制御します。
ビューポートメタタグを使用して、デバイスビューの解像度を最適化し、ユーザーがズームできるようにすることができます。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0
">
最大スケールを定義すると、ユーザーによるズーム方法を制御できます。レスポンシブWebサイトをズームしたい場合でも、既に直感的に理解できることを知っているため、このオプションを有効にする必要があります。
はい、レスポンシブサイトを開発するために必要なタグですが、タグだけを使用してもそうすることはできませんが、Webページの表示コンテンツのサイズを制御できるため、レスポンシブサイトの開発が容易になります。
疑いのある人にとって、最も簡単な方法は、それなしでテストすることです。私はそうし、Swift解像度-メタタグを1つだけ保持しなければならない場合、これはそれです（「説明」など）以上になりました。実際に私はこれと他のすべて、私は与え、すべてを離れるだろう。