メディアクエリでレスポンスとcontent=widthを両立するには

Question

通常、1200pxで作ったサイトをどんなデバイスでも画面に合わせて表示したい場合、以下のように記述すると思います。

<meta name="viewport" content="width=1200,initial-scale=1">

一方、レスポンシブサイトの場合は以下のように記述すると思いますが、

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

PCサイズを1200pxで画面合わせて表示したい上、レスポンシブにも対応（SPサイズは500pxなど）したい場合、どのような記述をすることができるのでしょうか？

Answer 1

kei344さんが回答しているように、PCブラウザは viewport の指定を無視します。
なので、

PCの場合は

<meta name="viewport" content="width=1200,initial-scale=1">

こういうことはできません。（記述しても無視される）

PCブラウザで閲覧している場合にはレスポンスしない通常の固定レイアウト、
タブレットやスマホ等の場合にはレスポンシブ、のように画面幅ではなくデバイスにより切り分けがしたいなら、
UA判定で適用CSSを切り分けるという手法が考えられます。

また、PCブラウザで閲覧している場合に、1200幅前提でデザインされた画面レイアウトのまま、
全体にズームで拡大・縮小するようにしたい場合も、UA判定をした上でJSで画面幅に合わせてズーム率を自動調整するような方法を検討する必要があるかと思います。

Answer 2

通常、1200pxで作ったサイトをどんなデバイスでも画面に合わせて表示したい場合、以下のように記述すると思います。

PC は viewport に影響を受けない（無視する）と思います。なので、viewport はスマートデバイス用にし、あとは CSS で画面幅に対応したスタイルをそれぞれ指定すればよいと思います。

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

@media screen and (min-width: 501px) {} /* PC */
@media screen and (max-width: 500px) {} /* SP */

Answer 3

PCサイズを1200pxで画面合わせて表示したい上、レスポンシブにも対応（SPサイズは500pxなど）したい

そもそも、この希望自体が矛盾しているのですが、幅の狭い環境下では結局どのような幅で表示したいのでしょうか。

Comments

[退会済みユーザー]

例えば、以下のようなメディアクエリのサイトを、
@media screen and (min-width: 501px) 　//PC
@media screen and (max-width: 500px) 　//SP

PCの場合は
<meta name="viewport" content="width=1200,initial-scale=1">

SPの場合は
<meta name="viewport" content="width=device-width,initial-scale=1">

でそれぞれ表示したいという意味です。