まえがき

以前制作したサイトをたまたま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」を指定しても改善されない場合

サイトの横幅等によっては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等の様々なデバイスに対応するの面倒くさいですが、うだうだ言いながら頑張っていこうと思います笑