レスポンシブ・ウェブサイト <meta name="viewport" content="width=device-width, initial-scale=1">。

4
2022.01.04

どこを見ても(Web.devなど)、携帯電話でWebサイトを拡大・縮小するためには、HTMLファイルのヘッダーに<meta name="viewport" content="width=device-width, initial-scale=1">を使用しなければならないと書かれています。

もしあなたが「モバイルファースト」の原則に基づいてウェブサイトをデザインし、CSSメディアクエリを使用し、vhvwpxではなく%などのスケーラブルなサイズ単位を使用しているなら、本当にmetaタグが必要なのでしょうか?

回答
3
2022.01.05

これに対するベストアンサーはStack Overflowの投稿にあります。

https://stackoverflow.com/questions/61238548/side-effects-of-removing-width-device-width-from-viewport-meta-tag-when-initi

関連する引用(強調しています)。

So....なぜこのviewportタグが必要なのでしょうか?今日では、メディアクエリがあるので、モバイルデバイス用にデザインすることができます。しかし、このメディアクエリは、実際のビューポートの幅に依存します。モバイルデバイスでは、ユーザーエージェントが自動的に、初期のビューポートサイズを異なる固定のビューポートサイズ(通常は初期のビューポートサイズよりも大きい)にスタイル設定します。そのため、モバイルデバイスのビューポートの幅が固定されている場合、ビューポートの幅が変更されることがないため、メディアクエリで使用するCSSルールは実行されません。viewportタグを使用すると、(UAによってスタイリングされた後の)実際のビューポートの幅を制御することができます。

私自身のウェブでの経験では、一貫して予測可能な方法で何かを適用する基準がある場合、真の権威あるソース(SEOのジョン・ミューラーのような)がそうでないと宣言しない限り、自己責任でその基準を無視することができます。