メディアクエリスマホ対応のサイズ幅がわからない

解決済

質問者：零礼
質問日時：2020/10/13 15:54
回答数：2件

スマホ対応向けにメディアクエリを作成してるのですが、スマホ対応のサイズ幅がわかりません。

例えば、下記URLだと、
https://seolaboratory.jp/89410/
デバイス「横」の画面幅「縦」の画面幅
iPad Pro(12.9) 1366px 1024px
iPad Pro(11) 1194px 834px
iPad Pro(10.5) 1112px 834px
iPad 1024px 768px
iPhone XS Max/XR/11/11 Pro Max 896px 414px
iPhone XS/X/11 Pro 812px 375px
iPhone 8/7/6s/6 Plus 736px 414px
iPhone 8/7/6s/6 667px 375px
iPhone 5s/5/SE 568px 320px
iPhone 4（以下） 480px 320px

試しにiphone6,6s,7,8のサイズに対応させようとメディアクエリのサイズを667pxにしましたが、メディアクエリが反応しませんでした。

HTML:
<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
</head>
<body>
<div class="head_top>
</body>

CSS：
.head_top {
background-color:pink;
}

@media screen and (max-width: 667px) {
.head_top {
background-color: green;
}
}

ですが、max-width: 980pxにしたら色が緑になって対応しました。
サイズ幅を大きくしたことにより、PCサイズ幅まで範囲が及んで緑になっていると思い、PCサイズにて確認したら、色はピンクになっておりちゃんとサイズごとに色分けされたメディアクエリが対応していました。

気になるのは上記の内容のように、実際のmax:widthはどの数値が正しいのかわかりません。
今回もiphone6,7,8は667pxと書かれているのに,実際は980pxでした。
もし、算出の方法がありましたら教えて頂けます様お願い致します。

ちなみに私の使用しているスマホはzenfone4 selfie proですが、画面の幅や高さでmax-widthが何pxかわかるにはどうすればいいのでしょうか？
URL:
https://www.asus.com/jp/Phone/ZenFone-4-Selfie-P …

合わせて宜しくお願いします。

補足日時：2020/10/13 22:38
通報する
回答ありがとうございます。

実際は980pxの幅でないとメディアクエリは反応しなかったので、980-750=230
230大きい原因は何なのでしょうか。
他にも細かなルールや設定があるのでしょうか。

宜しくお願い致します。

No.1の回答に寄せられた補足コメントです。補足日時：2020/10/16 09:58
通報する