フォローする

スマートフォンサイトで端末のサイズによってレイアウトが崩れてしまう

スマートフォンサイトのデザイン案において端末の画面サイズによって横並びにしている要素のレイアウトが崩れてしまうといった不具合がございます。
※新たに要素を追加して横並びに配置する際や元ページの要素を横並びにレイアウト変更する際などご注意ください。


iPhoneを例に説明いたします。
iPhone6では横並びに配置されていますが、iPhone5で確認しますと要素が段落ちしています。

 

 

これは横並びにしている要素の横幅を「pxで指定」している場合起こりやすい不具合です。
今回の例では横幅をpx指定ではなく「%で指定」し回避しています。

また、その逆のパターンもございます。
iPhone5では横並び要素がセンタリングされて配置されていますが、iPhone6など画面の大きな端末で確認しますと、左寄りになってしまう不具合もございます。

 

こちらは横並びにしている要素の「親要素の横幅をpx指定」している事で起こっています。
この場合「親要素のサイズ指定を%」にしたり「margin:0 auto;などで要素をセンタリング」し調整をお願いいたします。

 

 

上記は1例ですので、元ページの作りや変更方法によって回避策は異なります。
作成時には様々な画面サイズでの表示を考慮し、それに対応できる方法での変更をお願いいたします。

 

複数の端末をお持ちでない場合、PCブラウザのUA偽装で確認する事が可能です。

Google Chromeの例:
1.デベロッパーツールを開きます。
    Windowsの場合【Ctrl + Shift + I】もしくは【F12】
    Macの場合【Command + Option + I】
    (または右クリックで「検証」を選択)
2.下記画像をクリックしモバイルエミュレーション表示にします
3.プルダウンからデバイスを選択します。

こちらで端末ごとの確認が行えますので、様々なサイズの端末で確認を行い、レイアウト崩れがないかご確認ください。

尚、UA偽装では正常に表示されていても実機で崩れが生じている場合がございます。
この場合、実機での表示を正とし、修正依頼をさせていただきますのでご了承ください。

また、Landscape(横向き)表示でも崩れがないかご確認をお願いいたします。

投稿の際はお手持ちの実機でのご確認をお願いいたします。

 

 

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

0 コメント

ログインしてコメントを残してください。