PCサイトを【ipadやiphone】で表示した時のいろいろ

PCサイトを【ipadやiphone】で表示した時、さまざまな表示崩れが発覚したので、その症例と修正のメモ。

背景画像が表示されない

大きすぎる背景画像はipadやiphone表示されなくなってしまう。MAX 2メガピクセル。

修正は画像を2メガピクセル以内になるように分割し、CSS3の背景画像の複数設置方法を使って対処した。過去記事参照
CSS3は、IE6〜9までは対応していないので「CSS3 PIE」というプラグインを当てる。
だが、今回は効き目が無かったため、IE用スタイルシートを別途用意し、条件分岐

<!--[if lt IE 9]> 
      〜
 <![endif]--> 

をつかって読み込ませた。

ちなみにIEでは「CSS3 PIE」をつかっても機能するのは以下の5つだけ。
● border-radius
● box-shadow
● border-image
● CSS3 Backgrounds
● Gradients

スクロールがおかしい

pcサイトでよく使う、表示範囲内で入りきらない要素をスクロールさせるための「overflow:scroll」。
これはipadやiphoneでは
「スクロールしにくい。ios4ではスクロールを2本指でしなくてはならない。」
「スクロールバーが出ない。」
などの不具合が出る。

ios5からは、スタイル要素に対して「-webkit-overflow-scrolling:touch;」を書き足すことで解消。
（ただしoverflow-yやoverflow-xの切り分けは無視されてしまうのだそうです。）

a:hoverは効果無し

a:hoverは効かないのでどうしても変化させたい時は、opacityを使うと良い。

IE対策には
filter: alpha(opacity=70); /* ie 6 7 */
-ms-filter: “alpha(opacity=70)”; /* ie 8 */

文字が大きくなる

モバイルsafariで見ると文字が大きくなる

body {-webkit-text-size-adjust: none;}
* {-webkit-text-size-adjust:100%;}
スタイル要素に-webkit-text-size-adjust: none;を書き足す。

などとする。

［訂正］noneじゃなくて100％にする

line-heightが効かなかった

テキストの「line-height」が効かない箇所があった。
書体を指定したら効いた。（bodyにいれているだけではダメな場合があるらしい。）

webフォントは使えない。

webフォントは使えない。