Media Queries 4 で 非推奨となった

Media Queries 4 で 非推奨となった、
device-width 出力デバイスの幅
device-height 出力デバイスの高さ

これらは、以下のものが非推奨になったということでしょうか ?
@media only screen and (max-device-width: 480px) {
}

また、
<meta name="viewport" content="width=device-width">
のメタに設定するものも含むのでしょうか ?

これらの基準を決定しているのは W3C でしょうか ?


だいぶ勘違いをしているのだと思いますが、詳しい方おりましたら、
ご教授ください。

宜しく御願い致します。

No.1 ベストアンサー 回答者： debu120t 回答日時： 2019/10/18 09:31

へえ、そんなことになってたんだ。

あたしも調べてみました。↓こちらのページを参照すると、

https://triple-underscore.github.io/mediaqueries …
「表示域（ページ化媒体の場合はページボックス）のサイズをクエリする場合は、媒体特能［ width, height, aspect-ratio ］が利用されるべきである — ［ device-width, device-height, device-aspect-ratio ］ではなく — これらは、レイアウトされている文書に可用な空間の大きさに関わらず，装置の物理的サイズを参照するので。 device-* 媒体特能は、携帯機器かどうか検出するための代用として用いられることもあるが、作者は代わりに、スタイル付けを試みる装置の側面を より良く表現する媒体特能を，利用するべきである。」

とありますので、CSSに限っては
@media only screen and (max-device-width: 480px) {　}
とか
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen and (device-width:1024px)">
とかの使い方はやめましょう、ということだと思います。
要は「機体の画面サイズ」を取得するより「ページの画面サイズ」を取得すべきです、ということでしょう。

viewportに関しては特別な記述は見つかりませんでした。あたしの解釈ですが、
↓これはいいけど、
<meta name="viewport" content="width=device-width">

↓これは非推奨になるわよ、ってことでしょうか
<meta name="viewport" content="device-width=xxxx">

正しいことはわかりません。以下のページも参考になりました。
https://developer.mozilla.org/ja/docs/Web/CSS/@m …
https://developer.mozilla.org/ja/docs/Web/CSS/@v …

No.2 回答者： debu120t 回答日時： 2019/10/18 09:35

No.1です。

すみません訂正です。

@media only screen and (max-device-width: 480px) {　}

としましたが、
max-device-width
ではなく、
device-width
でした。
質問者さんから挙げられている
max-device-width
というのをコピペしたのですが、元よりmax-device-widthっていう指定ってあるんでしょうか？

この回答へのお礼

回答いただきありがとうございます。

max-device-width で検索をかけると出てきます。
非推奨となる device-width に接頭辞の付いたものと考えていますが、
これらを @media only screen and (... 内で使っているようです。
但し、少し昔の記事が多いようです。

自身ではあまり使ったことはないのですが、あると便利ではあります。

お礼日時：2019/10/19 11:12