2013/09/11

windowsのメディアクエリによるリサイズとJavaScriptで登録したリサイズイベントのタイミング

レスポンシブデザインのサイトで使用するスライドショー的なものを作成した。
ウインドウサイズによって、レイアウトが変わるので、スライドショーもそれに合わせてリサイズするようにした
スライドショー側では、リサイズ後の要素のサイズを取得して、それをもとにスライダーのりサイズ処理をした。
そこがうまく動かない。
要素のサイズの取得がうまくいっていなかった

ウインドウを小さくすると、メディアクエリで設定してあるウインドウサイズでレイアウトが変わる。
その瞬間にJSで取得したサイズをconsole.logで見てみると…

レイアウトが変わる前のサイズが取得されていた。
つまり、cssの設定が反映される前に、JSのサイズ取得の処理が動いたようだ。

Macでは起きず、WindowsでもIEとfirefoxでのみ起きる現象だった。
俺のイメージと違った順序で進んでいたようなのでメモ。

レイアウト変更後のサイズ取得をsetTimeoutで少し遅らせることで対応した。

0 件のコメント:

コメントを投稿