制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングHTMLiPadやiPhoneでサイトの右側が切れる、余白ができる場合の対処法

iPadやiPhoneでサイトの右側が切れる、余白ができる場合の対処法

2014年02月27日HTML iPhone 
iPadやiPhoneでサイトの右側が切れる、余白ができる場合の対処法記事のアイキャッチ画像

PC用のサイトを、そのままiPadやiPhoneで表示するときに右側が切れてしまったり、余白ができてしまうことがあります。その場合「viewport」の設定で解決するかもしれません。その設定を紹介します。

まえがき

以前制作したサイトをたまたまiPadで閲覧したら、一部のページが画面内に入りきらず右側が切れてしまっていました。
iPhoneでみるとピッタリ画面に収まっていたのですがiPadやiPhoneめんどくさいですね。

昔のIE6を彷彿とさせる感じでiPadやiPhone対応が面倒くさいです笑

しかし「viewport」をしっかり設定すれば簡単に直すことができましたので覚え書きとしてエントリーしておきます。

ただPC用のサイトを単純にiPadのディスプレイにピッタリ収めて表示してあげれば良いだけです。

iPadやiPhoneで右側が切れたり、余白が空いたりする現象を回避する「viewport」の記述

「viewport」の設定で表示するデバイスのディスプレイサイズに合わせてサイトをリサイズして表示することができます。

<meta name="viewport" content="width=device-width" />

「width=device-width」を指定するとデバイスのディスプレイサイズに合わせてリサイズしてくれます。
「user-scalable」等の設定は適宜変更してください。

viewportに「width=device-width」を指定しても改善されない場合

2014年03月03日 追記

サイトの横幅等によってはviewportに「width=device-width」を指定しても改善されない場合があります。
そんな時はviewportに「width」にそのサイトの横幅を指定してあげましょう。

例えばサイト全体が960pxの場合の記述になります。

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

それに加えてCSSにこの指定を追加すれば解決するばずです。

html,body{
    width: 100%;
}

例えば、要素を「position:absolute」で画面の右端とかに配置していると良くわかるのですが、iPadやiPhoneだとhtmlやbodyの横幅が中途半端なところで終わっているような挙動が見られます。

なのでhtmlとbodyに明示的にwidthを指定してやる必要があるのですね。
なんとまぁめんどくさい笑

まとめ

なぜかiPadやiPhoneでサイトの右側が切れてしまったり、逆に余白が空いちゃったりする場合は「viewport」の設定を見直すとよいでしょう。
というか、PCサイトとかをそのままiPadやiPhoneで表示させる場合は、とりあえず「viewport」に「width=device-width」、または「width=サイトの横幅」を指定しておけばよいでしょう

iPadやiPhone等の様々なデバイスに対応するの面倒くさいですが、うだうだ言いながら頑張っていこうと思います笑

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント