レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 : 森のコーディング

2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 カテゴリ:javascriptiphone/ipadサイト Tweet レスポンシブデザインのサイトを作っていて、 ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。 でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。 んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、 どうやらwin端末だと切り替えのタイミングがズレることがわかった。 css → 768pxで切り替えたい → @media screen and (max-width: 768px) → ちゃんと768pxで切りかわる js → 768pxで切り替えたい → if($(window).innerWidth() < 768){ → 78

[datemakio]

safariだとズレると思うから、Modernizr使うか、cssで何かの表示・非表示を切り替えて$('.xxx').is(':visible')で判断がいいと思う

[megazalrock]

自分は、変更があった時にJSとCSSの両方直すのが面倒なので、ブレークポイント超えたのをJSで検知してイベントをトリガーしてる。

[mole-studio]

非表示DOMにcssで各幅ごとに適当なプロパティを当てはめて、それをリサイズごとに計算された値を読むのがもっと正確だと思う。jsに生でブレークポイント書くとかナンセンス。

[kuracom]

ブコメも参照 / window.matchMediaてのがあるのか / とても参考になるブコメが多数

[ikajigoku]

多分cssのメディアクエリで適当な要素の属性切り替えてjQueryで検知するのが一番良さそう。 http://qiita.com/blogger323/items/ba66326badc172315c45

[yoiIT]

ブコメもチェック

[exactman]

絶対

[yamadar]

えっ？と思ってブコメ読んだら指摘されてた。

[kagioo2uma]

メモメモ

[mr_bond]

いずれ出てくる可能性。参考にしよう

[sippo_des]

comment

[umeharu626]

ほー参考