横幅の広い画面でだけサイドバーのロゴが縮む原因を調べる

横幅の広い画面でだけロゴが細くつぶれると、解像度の低い画像を疑いがちです。今回測定したのは、画像そのものと、その画像を入れている枠の高さです。期待した45ピクセルに対し、サイドバー内の枠は12ピクセルまで縮んでいました。

今回の対応

11月7日、製品デモのサイドバーで、想定45ピクセルのロゴ枠が12ピクセルまで縮む現象を確認しました。ロゴ枠の高さを維持し、収まらないメニューは縦にスクロールできるように修正しました。

なぜ横幅ではなく高さを見るのか

縦に並ぶロゴとメニューが一つの高さを取り合うと、メニュー項目が増えたときにロゴの領域まで圧縮されることがあります。高精細な画像に替えても、入れ物が12ピクセルなら表示は直りません。そこでロゴの枠を保ち、収まらないメニューのほうをスクロールさせました。

状況別の判断と次の対応

見た目を戻した後の回帰確認

ロゴを固定するだけでは、下のメニューが押し出されて操作できなくなる場合があります。ロゴ全体が見えることと、画面内に収まらないメニューの末尾に到達できることを対で試します。公開後の確認は1440pxと390pxのブラウザー表示で、実機種別の網羅試験とは区別しています。