Q&A
デベロッパーズツールで確認した時にはどうなっていますか？
iPad 実機(画面幅７６８px)で見たときに、cssに記述している、@meadi screen and (max-width: 768px)が反映されていません。
しかし、iphone SE2(画面幅375px)で見たときは、@meadi screen and (max-width: 768px)で指定した内容が反映されています。
なぜ、iPad 実機(画面幅７６８px)で見たときに、、@meadi screen and (max-width: 768px)で記した内容が反映されないのでしょうか?
試したこと、
andの後に半角スペースを入れる。
max-width:と、768px の間に半角スペースを入れる。
しかしipadでは@meadi screen and (max-width: 768px)が反映されずPC表示がされてしまいます。
<head> </head>に箇所には ```HTTML <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> ```cssは以下のように書いています。
css
1 .suggestion_mechanism__wrap { 2 display: flex; 3 margin: 71px 0 55px; 4 @media screen and (max-width: 768px) { 5 display: block; 6 margin: 6.3vw 0 9.4vw; 7 }
と記載しています。
例えば上記の箇所では画面幅768pxからは.suggestion_mechanism__wrapの中身が縦に並ぶはずなのですが、ipad実機(画面幅７６８px)で みると、display:flexが効いています。(iPhone SE2実機(画面幅375px)では@media screen and (max-width: 768px)の内容が反映されています。)
どうすればipad実機(画面幅７６８px)で @meadi screen and (max-width: 768px)の内容が反映されるようになるでしょうか?
769pxにしたら反映されないでしょうか？
コメントありがとうございます。
デベロッパーズツールで確認した時にはどうなっていますか？
デベロッパーツールで見ると780pxで画面は変わります。
769pxにしたら反映されないでしょうか？
769pxにしてみてもダメでした。
780pxにしてみたもダメでした。。。。
「デベロッパーツールで見ると780pxで画面は変わります」とのことでしたが、それはレスポンシブモードでデバイスを「iPad」にして確認した、という理解で合っていますか？
また、確認したiPadのデバイス台数を教えてください。1台でしょうか？複数確認していますか？
ん？あれ？
「デベロッパーツールで見ると780pxで画面は変わります」ということは、@meadi screen and (max-width: 768px) が効いていないということではないですか……？
Lhankor_Mhyさま
すみません。数値間違えていました。
デベロッパーツールだと768oxで画面表示変わります。 780pxは間違いです。
max-widthを780pxにしてみても結果は変わらなかったのですが、max-width:1024pxで@mediaがききました。
ブレークポイントの値を大きすることでipad実機で表示変わったのですが、１台のipad実機でしか試していないのですが、ipad airや世代の違うipadだとまた結果は変わったりするものなのでしょうか?
「max-width:1024pxで@mediaがききました」とのことですが、横持ちしてる時の解像度と一致するのが気になりますね。
あとは、iPadだと思っていたが iPad Pro だった、とか？
それはないか……
コメントありがとおうございす。 実機はipadですね。
ipadの画面幅は768px ということになっていますが、結果max-width:810pxでipad実機でスマホビュー実現できました。
経験が浅いため、ipadは768pxだろ。と思い込んんでいたのですが、そういうものなのでしょうか。。。。
いろいろあるみたいですね。
https://webdesign-abc.com/tech/resolution-list/
Lhankor_Mhyさん
810もありますし、そういう事みたいですね。
ありがとうございます。
やはりipadのタテ画面だと810pxでよかったのですね。
ipad = 768pxだとの思い込みでお騒がせしました。
みなさんありがとうございました。
ご解決されて何よりです。
私も、Pro 以外はCSS解像度が同じだと思いこんでいました。
もっと早く調べればよかったです。
回答3件
0
すごい根本部分かもなのですが・・・
スペルミスって事はないですか？
@meadi screen and (max-width: 768px)→@media screen and (max-width: 768px)
追記
すみません、コード側はきちんとなってましたね。
質問内容を凄い勘違いをしておりました。
本当に失礼しました。
投稿2021/04/28 05:34
編集2021/04/28 05:44総合スコア445
コメントありがとおうございす。
ipadの画面幅は768px ということになっていますが、結果max-width:810pxでipad実機でスマホビュー実現できました。
経験が浅いため判断が難しいのですが、そういうものなのでしょうか。。。。
因みになのですが、それって1pxでも大小を変えたら反映されないのでしょうか？
max-width:809px では スマホ表示されませんでした。
max-wodth:810pxではスマホ表示実現できました。
Lhankor_Mhyさんのリンクに810もあるので多分そういう事だと思います。
勘違い回答してしまってますし、自分の回答削除依頼通らないかなと思う今日この頃・・・
了解しました
すみません。回答自体の削除を行えるのでしょうか？やり方がわかりません。
頂いた回答に、こちらは全く悪い気はしておりません。
むしろコメント頂けて感謝しております。
自分の書き方が悪かったですね、申し訳ありません。
削除依頼は自分が出さないといけないので、申請通らないかなって思っただけです（申請済みですが、確かコメントついてたりしたら通らなかったような・・・）
つまりは独り言みたいなものです、紛らわしくてすみません。
0
viewportの問題じゃないかな。
HTMLのhead内に下記の設定を追加してみたらどうでしょうか。
html
1<meta name="viewport" content="width=device-width, initial-scale=1.0">
投稿2021/04/28 04:07
総合スコア34084
コメントありがとうございます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
に書き換えてみたのですが結果変わらずでした。
0
自己解決
コメントで頂いた以下のリンクにも記載されているようにiPad(7・8) は画面幅810pxでした。
そのためipad実機でスマホ表示させたい場合はmax-width:810px とするのが正解でした。
投稿2021/04/28 06:56
総合スコア555
あなたの回答
tips
プレビュー
