みかづきブログ その3

3ヶ月つづけてみました。

スマートフォンで要素の高さを%指定した際に表示がおかしくなることがある

DEMO

偶然みつけました。PCのブラウザだと.imgのheightがgreenの80%になりますが、スマートフォンのブラウザだと.imgのheightがbodyの80%になります。

発生条件

  1. 親(#green)の高さが%指定で、その親(#red)の高さがauto
  2. 自分自身(.img)はposition: static、親(#green)とその親(#red)はstatic以外

1, 2を満たすと発生する模様。

解決策

・自分自身(.img)のpositionをabsoluteにする
・親の親の高さ(#red)をJSで明示的に指定する

のいずれかで解決する模様



上記DOMOでは、.imgをタップした際に#redの高さをpxで指定するようにしているので、スマフォでも.imgをタップするとPCと同じ挙動になります。
ただしリサイズイベントには対応させていないので、ウィンドウをリサイズするとまたおかしくなります。