PC用サイトをiPhoneで閲覧時の右側が切れる!?

PC用のサイトを、そのままiPhoneやiPadで表示すると右側が切れてしまった時の対処方法を忘れるので。

対策としては「viewport」の設定で解決!!

右側の切れや、余白の原因

現在、スマホの利用率45.4% そして普及率は36.9%という結果が出ております。
(日経BPコンサルティング スマートフォンの利用率と普及率の年次推移 参照)

zu02s

という事は、PC用に制作したサイトをスマートフォンで閲覧する事が多くなってきてるはずですよね

そして、閲覧すると一部分が画面内に入りきらず右側が切れてしまっていたり、はみ出していたり。。。
原因としては、要素を「position:absolute」等で画面の右端などに配置していると右側が切れる現象が起こったりするようです。

こんな状況になった時の対策!「viewport」設定すれば簡単に直すことができます。

viewportに「width」を指定しよう

サイトの横幅が960pxの場合viewportに「content=”width=960″」を指定すれば問題解決です。

<meta name="viewport" content="width=960" />

最後にCSSに下記指定を追加すれば解決

html,body{width: 100%;}

 

スマホ対応のサイト制作も増えてはいますが
まだまだ徳島ではPC用のみのサイトが多くありますので【viewport】での対策覚えておかないと

コメントを残す

CAPTCHA