jQueryAutoHeight.js をレスポンシブデザインで使う
2014-03-08
1分で読了
更新: 2025-12-14
目次
細々と公開しているんですけれども意外と使われている「jQueryAutoHeight.js - 複数のカラムの高さを最大値にそろえるjQueryプラグイン」を、レスポンシブデザインのサイトで使いたいというご意見を頂きました。
PC版のときはカラムが横に並ぶので高さを揃えるといい感じになるのですが、スマホのときは１カラムになって縦に並ぶので、そこで高さを揃えてしまうと無駄に間延びしちゃうということですね。
そんなときは、jQueryAutoHeight.js を実行するところで、以下のように横幅の最小値を設定し、その最小値とウィンドウサイズを比較して実行するかリセットするかを分けてあげれば良いと思います。
minWidth の値を適宜設定してください。
このように .resize() を使えば、iPhone などを横に倒したりした時にも横幅をチェックして実行し直してくれると思います。
以上です。