Q&A
> IPhoneかAndroidかでメニューバー(ナビゲーションバー)の高さに違いがあり
中身が違うのでしょうか？それとも、両者のレンダリングの違いでそうなってしまうのでしょうか？
CSSのメディアクエリのレスポンシブで通常は横幅を基準すると思うのですが、
これだとIPhoneかAndroidかわかりません
IPhoneかAndroidかでメニューバー(ナビゲーションバー)の高さに違いがあり、
全て%でサイズ指定しているサイトのレイアウトにかなり影響が出ます
そこで、
これはIPhone(高さ)
これはAndroid(高さ)
これはタブレット(横幅)
これはPC(横幅)
CSSのメディアクエリで上記のような厳格な分岐はできるんでしょうか？
詳しい方回答お願いいたします
ウェブサイトの全体の高さがheight:100%として
Androidのメニューバーの高さが10%
IPhoneの高さが20%だとしたら
当然IPhoneのほうが表示領域が狭くなって見えますよね？
メニューバーの高さが違うのでIPhoneがプレスされたような表示になってしまいます
意味伝わりますでしょうか
> Androidのメニューバーの高さが10%
IPhoneの高さが20%だとしたら
それはどうやって切り分けているのですか？
追記です
中身というのはウェブサイトでしょうか
ウェブサイトは中身同じです
AndroidとIPhoneはメニューの高さが異なるため、
IPhoneの表示が潰れてみえます
メニューバーの高さが影響しているのは本当です
メニューバーの高さの数値を取得することはできませんが、
表示領域が狭まれば見える範囲に影響が出ます（%の指定)
既存のキットか何かで作ったサイトだと気にしなくていいんでしょうが、、、
こういう悩みを持ってる方は少なそうですね。。。
> こういう悩みを持ってる方は少なそうですね。。。
ふつうは縦方向にスクロールするように作るので、「高さが狭いとレイアウトが崩れる」事態にはなりづらいです。
回答1件
0
ベストアンサー
AndroidとIPhoneはメニューの高さが異なるため、
IPhoneの表示が潰れてみえます
なら、高さを条件にレイアウトを変えればいいだけではないでしょうか？
（端末によって高さがバラバラですし、同じ端末ですらキーボードの種類や有無によってレイアウトが変化しますので、端末種類を考えても仕方ありません）
投稿2021/07/26 01:48
総合スコア146100
高さを条件にレイアウトというのはCSSでですか？
どのような条件式がありますか？
メディアクエリの条件にheightも指定可能です。
調べが不足してました。
回答ありがとうございました。
あなたの回答
tips
プレビュー
