2010年05月29日(土)

携帯サイトでbodyにwidth:100%でも空白ができる

FavoriteLoadingあなたのお気に入りの記事に追加(cookieに保存されます)

今回は携帯サイトについて。
テスト機種はSoftBank 920SHです。

最近、携帯サイトのリニューアルをする機会がありました。
なるべくページサイズを小さくしたいと思い、トップページをスクロールなしで見れるようにしました。

ところが・・・
ページの右側に1mmほどのすき間(空白)が出てきてしまいます。

CSSで
[sourcecode language=”html”]<style type="text/css">
body {width:100%;}
</style>[/sourcecode]
としても変化なし。

[sourcecode language=”html”]<style type="text/css">
body {width:100%;margin:0px;}
</style>[/sourcecode]
でも変わらず。

もしかしたらと思い、
[sourcecode language=”html”]<style type="text/css">
body {width:100%;margin:0px;overflow:hidden;}
</style>[/sourcecode]
とすると、空白がなくなりました。

つまり、スクロールバーの空白だったようです。
スクロールしなければ見れないページであれば、その空白にスクロールバーが表示されます。

しかし、スクロールしなくても見ることができるページでは、スクロールバーが消えて空白になっていたようです。

これは携帯の機種によって挙動がちがうのでしょうか??

あなたのコメントが一番最初です!

コメントをご入力ください