ヘッダー固定するスマホサイトコーディングでうまく表示されない場合の対処

hand-apple-iphone-smartphone

先日、スマホサイトのコーディングをしました。

実は、レスポンシブのコーディングはしたことがあるのですが、スマホサイトは初めてコーディングしました。

よくあるヘッダーが固定になっていて、ヘッダー部分にメニューボタンがあり、そこをクリックするとナビゲーションが表示されるものを作ってました。

img-ok

ヘッダーを固定するのは position:fixed; をヘッダー部分のcssに記載すればいいと思ってコーディングしてできたのです。
iphoneでみてもandroidで見てもヘッダーが固定されていることが確認されました。

ですが、コーディング依頼してきた方からandroidでヘッダーがずれると言われました。
ヘッダー部分が中央部分にあったりするそうです。

img-ng

でも、こちらでは何度見てもずれていないので機種とOSを聞いてみたところAQUOS PHONEの4.2.xだということでした。他のAQUOS PHONEで見ても同じ現象が起こると。
他の端末ではずれることはありませんでした。

すごく頭を悩ませいろいろなサイトを見て修正してもうまく表示されませんでした。
試行錯誤の末、cssに下記を挿入したらなおりました。

top:0;
left:0;

これがないとAQUOS PHONEはヘッダー固定してくれないみたいです。

スポンサーリンク
ad
ad
スポンサーリンク
ad