【Webコーダーの苦悩②】縦幅編
さき
お仕事
引き続きWebコーダーの苦悩（ほぼ愚痴）です。
⇒【Webコーダーの苦悩①】横揺れ編
前回が横なら今回は縦です。
最近はもはや当たり前にレスポンシブデザイン（スマホ用デザインとPC用デザイン）でサイトは作られる訳ですが、そうなると横幅は基本的には可変になりますよね。
前回記事で書いたように、パソコンの画面は伸び縮みするので、レイアウトもそれに合わせて伸び縮みするように作ります。
横はいいの、でも縦はダメ。
縦は原則可変禁止です。
縦幅を可変にすると高確率でレイアウト崩れを起こします。
画像とかは顕著に表れますけど、ほんっとにブサイクになる。クマさんとか🐻（クマ好きか）
基本的には縦幅を指定することはしないですが、動画の丸なんかは指定しないと中身（子要素）がないので表示されないんです。
それで例えば高さに可変値入れるとするじゃないですか？
ね、可愛くないでしょ。丸がびよーんって。
で、ここまでが前座でここからが愚痴なんですけど（長）、
つまり高さは原則中身の量次第なんですよね。
画面いっぱいに作るデザインだと、画面内に中身が収まらないといけないわけです。
デベロッパーツールで確認すると・・うんうん、収まってる。ってやつがね、 実機で見ると、
はみ出しとるやないかい。（2回目）
ってなるパターンが多くて・・・( ﾉД`)ｼｸｼｸ…
確認の為にデベロッパーツールって言うchromeの標準機能を使って、パソコン上でスマホのレイアウトを確認するんですけどね。
デベロッパーツールはとっても優秀な機能なんですけど、アドレスバーとか考慮してくれないんです。
この見た目を鵜呑みにしちゃダメ。
なので最近『モバイルシミュレーター』でも確認するようにしてます。
より実機っぽく確認できます。
それでも・・safariのアドレスバーは考慮してくれないの・・・( ﾉД`)ｼｸｼｸ…
safariが一番厄介ですよね。アドレスバーが出たり引っ込んだりする度に画面リサイズするし。すな、リサイズすな。
縦幅もデバイスによって様々やから～ってことで可変値入れたくなるんですけど、これがさっきの動画でお見せしたようにできないんです。できないというか、しない方がいいというか、やったら調整と修正の嵐で1pxずつメディアクエリ入れるつもりか！？正気か！？となるので、“致しません”。
と、こんな感じで日々画面と睨めっこしてます。意外と（？）横幅より縦幅が大変です。
今回もよく分からない内容だったと思いますけど、私の愚痴に付き合ってくれてありがとうございます（指ハート）
もし実機で見たら全然収まってないやん！って現象に悩まれてる方いたら、モバイルシミュレーター使ってみてください。