画面サイズ(縦幅)に合わせてサイズ変更するコンテンツ
画面の縦幅(天地)サイズによって、各要素の大きさや位置を調整したい場合があります。
これ、いろいろやり方はあるのでしょうが、僕はjQueryの「$(window).height()」で画面サイズを取得して、それに併せて各要素の位置やサイズを計算で設定するようにしています。
この場合、ページ読み込み時に調整用の処理を実行するのはもちろんですが、ウインドウサイズが変更された場合も再調整する必要があります。
「$(window).bind("resize", 関数名);」としてリサイズ時の対応をしていたのですが、これだとiPhone/iPadの縦横向き変更時のイベントがとれていないことが発覚。
iPhone/iPadの向き変更のイベントは「$(window).bind("orientationchange",関数名);」とするようです。
処理が同じなら「$(window).bind("load orientationchange resize ",関数名);」で、読み込み時も含めてOKかと。
これ、いろいろやり方はあるのでしょうが、僕はjQueryの「$(window).height()」で画面サイズを取得して、それに併せて各要素の位置やサイズを計算で設定するようにしています。
この場合、ページ読み込み時に調整用の処理を実行するのはもちろんですが、ウインドウサイズが変更された場合も再調整する必要があります。
「$(window).bind("resize", 関数名);」としてリサイズ時の対応をしていたのですが、これだとiPhone/iPadの縦横向き変更時のイベントがとれていないことが発覚。
iPhone/iPadの向き変更のイベントは「$(window).bind("orientationchange",関数名);」とするようです。
処理が同じなら「$(window).bind("load orientationchange resize ",関数名);」で、読み込み時も含めてOKかと。
コメント