More than 5 years have passed since last update.

Androidでposition:fixedとwidth:100%をかけた要素がlandscape(横向き)にしたときに100%にならない場合の対策

Last updated at 2017-04-25Posted at 2014-11-17

タイトルでは分かりづらいのですが、
ニュースサイトやブログなどでよく利用されている、固定配置されたソーシャルボタンなどの追従メニューのことです。

確認した環境はAndroid4.0ですが、恐らく他のバージョンでもなると思います。

タイトルに記載したとおり、スマートフォンサイトでposition:fixedとwidth:100%をかけた要素があり、横向きにしたときにRepaintが起こらず、portrait(縦向き)のサイズのままとなりました。

対策としては下記のようになります。

CSS

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

Media Queriesを使用して、landscape時もwidth: 100%;をかけてあげることにより、再描画されます。子要素もwidth: 100%;を指定しているときには一緒に指定してあげましょう。