iPhone iOS の CSS対応 ブレース内の間違えは…

CSSのコードを一文字でも間違えていると、iOSはその間違えたところから閉じブレースカッコまで無視する。

スマホの幅に合わせる

ページの中身をたとえば1000pxにそろえて、いっぱいに表示しようとするとき、スマホではうまくいかないことがある
そういった時には

body,html{
    min-width:1000px;
}

をためしてみる。

スマホの幅いっぱいの（はずの）画像がはみ出たとき

imgのwidthの設定を画面より多きくしてしまって、ブラウザがふらつくのを治すには、「max-width」などを使うのだが、ただ単に設定変更してブラウザの再読み込みをしただけでは「WIDTH = 100%」にはならない。
iPhoneだけかもしれないが、リロードしてからブラウザをシュリンクして一度小さくしてやる必要がある。

CSS 「img」の下に隙間が…

vertical-alignのデフォルト値は、IEなどのメジャーなブラウザではbaselineに設定されているから

gとかjとか下にはみ出るアルファベットのはみ出た長さの分だけ隙間ができるわけです。

なので、

img{ vertical-align:bottom; }

とすると、「img」の下の隙間がなくなるのです。


参考サイト
http://webtech-walker.com/archive/2007/03/01143619.html