CSSの教訓: レスポンシブなページでは、サイズの相対指定を忘れずに

症状

ひとつのHTMLに対してPC/モバイル両方のCSSをそれぞれ用意する、いわゆるレスポンシブなページについて。
モバイル向けではヘッダーをposition: fixedで固定し、その中にドロワーメニューのトグルボタンを右上隅に絶対表示で設置しています。

PC向けのフロート表示のために<div>に幅をピクセルで固定指定し、モバイル向けでは特に変更していませんでした。
また、一部の画像の幅はmax-widthで指定されていませんでした。
そのため、画面幅の縮小に追従して左へと移動しようとするトグルボタンに対して固定幅の要素が障壁となってしまい、トグルボタンがそれ以上左へ進めずに画面外に取り残されるという不具合が発生しました。
厄介なことに、PCのブラウザでは問題はなく、実機やエミュレータのみで発生します。

教訓

• モバイル向けビューでは、必要な場合を除いてサイズは相対指定すること。
• PC向けビューを元にしてモバイル向けを作る場合は、固定指定から相対指定への変更を忘れないこと。
• モバイル向けビューは必ず実機またはエミューレータで表示確認をすること。
• 「カラム落ち」をレスポンシブの代わりとして安易に頼らず、必ず専用のCSSを記述すること。

感想

レスポンシブをなめてました (-_-;)
それにしても、ChromeのDevice Mode & Mobile Emulationは便利すぎます (;ﾟ∀ﾟ)=3ﾑｯﾊｰ
単に画面サイズを変更しているのではなく、モバイルのブラウザでの表示を正確に再現しているようです。
今回とは別の場面でもその表示の再現性の高さに驚き、助けられました m(_ _)m