とりあえずAndroid標準ブラウザ対応
ずっと気になっていたのですが、自分のサイトをAndroid端末から見ようとすると、初期が縮小表示で面倒くさい感がたっぷり。
ということで、若干書き換えて、デザイン等はともかく、スマートフォン対策を行うようにしました。
viewport
<meta name="viewport" content="width=device-width,initial-scale=1" />
を記入。これでデバイス幅をウィンドウ幅とし、表示倍率の初期値を100%にします。
こうしないと、大きい画面で表示するのと同じレンダリングを行ったうえで縮小表示することになります。
メディアクエリ
@media (max-width: 600px) { /* 小さいウィンドウ向け */ }
みたいなかんじ。
全メディア→screenメディア の優先順位で上書きしつつ書いていたので、全メディア→screenメディア→小さいウィンドウ向け となるように書きました。
余談: Google Chrome の overflow
左メイン、右メニューの構成にしていて、左(メイン)に対して
<div style="float: left; width: 100%; margin-right: -10.5em;"> <div style="margin-right: 11em;"> ...
といった方法をとっています。
そうすると、右カラムが、スクロールバーが表示された場合に限って、表示されません。
どうも overflow: auto の処理で問題があるとの情報を得て、左カラムと右カラムを保持するdivを新設して、これに対して
overflow: hidden;
とかやってやると、とりあえず表示されるようになりました。