Androidのスマホ画面を横向きに見た時にヘッダーが崩れる！？そんな時の対処法！

2016年12月13日

スマホサイトをコーディングしている時に、実機確認をする為にandroid端末で横向きにページを見て見ると、ヘッダーが崩れているー！！ってことがありました。
ちなみに僕が実機確認で崩れが確認できた端末はandroid4.2でした。

原因を調べていると、スマホサイトで良く見かける、スクロールしても要素が固定配置されてついてくる、追従ヘッダー（スティッキーヘッダー）を実装する為に、position:fixed;を使い、要素の幅にwidth:100%;を指定していたことが原因でした

androidの旧バージョン（4.4以下で起きることがあるらしい）では、position:fixed;を指定した要素に%でwidthを指定すると起きる、固有のバグのようです。
解決方法を備忘録として下記に残しておきます。

html

<div class=”header”>ヘッダー要素</div>

1	<div class=”header”>ヘッダー要素</div>

スポンサードサーチ

.header {
position: fixed;
width: 100%;
}
@media screen and (orientation:landscape) {
.header {
width: 100%;
}
}

.header {

position: fixed;

width: 100%;

}

@media screen and (orientation:landscape) {

.header {

width: 100%;

}

あまり見かけない記述で、
orientation ： landscape
オリエンテーション（適応、順応）：風景直訳すると分かりづらいですが、
landscape orientation は、横向き、横長の意味のようです。

つまり、端末が横向きの時にもwidth:100%;を適用してあげる、という意味になります。
これでandroidの旧バージョン（4.4以下）でもfixedを使った要素の追従が実装できますね！