1. アドベネック
  2. アドベネックのブログ
  3. HTML
  4. レスポンシブサイトでcssとjsのブレイクポイントがずれる時の対処

Posted on Sep 28, 2016 by Naitou

レスポンシブサイトでcssとjsのブレイクポイントがずれる時の対処

記事カテゴリー: HTML

レスポンシブサイトでウィンドウサイズを変えたとき、思うようにcssとjsの切り替えポイントが一致しない、上手くイベントが発火しない時の対処方です。

レスポンシブサイトを作る時、PC版とSP版でひとつのhtmlを使い、読み込むcssの範囲を切り替えて表示する場合があります。
この時、レイアウトが変わりますからjavascriptの挙動も変えたい時が出てきます。

一例

html_cj_1

cssの設定は、横幅のウィンドウサイズによって切り替わります。
上記の例では、横幅が640px以上の場合はPC版、639px以下の場合はSP版を表示させます。

一方、javascript側ではリサイズイベントが発火する度にウィンドウサイズを検出し、
横幅の数値により処理を変えます。

コード上は問題ないはずなのに、ブレイクポイントがずれる?

動作チェックの為に、パソコン上でウィンドウサイズをだんだん小さくしてみると…cssはSP版を読み込むのに、javascriptはPC版用の処理を通ってしまう!

そんな時の原因は大体スクロールバーです。

横幅が広い時はコンテンツの全てを表示出来ていた為、スクロールバーは非表示。
横幅を狭めていってcssがSP版に切り替わった時に、スクロールバーが表示状態に。この時スクロールバーの横幅分処理がずれてしまいます。

スクロールバーが原因なら、スクロールバーの横幅分、条件式に追加すればいい?

この解決方法はお勧めしません。
この方法を取る場合、「スクロールバーが表示と非表示で切り替わる」事が前提になってしまうからです。
PC版でもスクロールバーが表示されていた時は?
タブレットなら横幅が広くても、元々スクロールバーはfadeIN/fadeOUTしてしまう為、横幅計算に関係ありません。
結果的に条件式が複雑になってしまいます。

一番簡単な解決法

一番簡単な解決法は、javascriptの条件式を、要素のcssの値にする事です。

html_cj_2

cssの設定を横幅のウィンドウサイズによって切り替えた後、javascriptはcssの値を参照し、条件分岐します。
PC版とSP版で値の違うcssが設定されている要素なら条件式に使えます。
スクロールバーの有無やブラウザによって値の変わる横幅の条件式では起こっていたずれが、切り替わるcssを条件式にする事により、ずれが解消されます。

この記事をシェアする

このカテゴリーの一覧に戻る

内藤

この記事の投稿者

内藤Naitou

高専、専門学校卒という独学派が多いアドベネックの中で唯一コンピューター言語を学校で学んだスタッフでありながら、ペンタブレットを使ったイラスト作成なども担当できるレアキャラ。NINTENDO好き。ゲームを買って積んでおくのが趣味。

  • Ps
  • Ai
  • Dw

同じカテゴリーの投稿

最近の投稿

記事のカテゴリー

アドベネックのSNS