スマホ表示が正確にされません。

Question

以下のページはwordpressレスボンシブルテーマで作成したものですがこのページだけ以下のようにスマホ表示が正確にされません。
どこが間違っているのでしょうか？

google chrome デベロッパーズツールのスマホ表示で見ると会社概要バナーと下のヘッダー部分のみ左右の幅が違います

Answer 1

#contentsにはwidth:100%;(iphone6の場合375px)となっているのに、dlにwidth:450px;があたっているのが原因です。
スマホ対応ならば値は%であてるのがいいと思います。
また、必須ではありませんがdlにはclassを振るのがベターではないかと。

Comments

[Wordpress]

返信ありがとうございます
ご指摘の通りstyle.cssをchrome デベロッパーズツールで以下のように変更してみましたが変わりませんでした。（Nokia9)スマホによって見え方が違うようですがいずれにしろこのページだけページ崩れしています・・

dl {
width: 100%;
overflow: hidden;
_zoom: 1;
}

[rossi46hiro]

Chromeで見てみましたが確かにデベロッパーツールで変更すると変わりませんでした。ただ、bodyをすべて消しても変化がないので、おそらくChromeの挙動の方がおかしいはずです。
Firefoxでは問題なく表示されています。cssを当てて実機で確認してみて下さい。
ちなみにdlに当てるのにoverflowとzoomはとくに必要ないかと。

[Wordpress]

返信ありがとうございます。
今私もgalaxy4s Firefoxで見た所崩れはありませんでした。
chromeデベロッパーズツールgalaxy4s表示設定するのと、実機galaxy4sで左側に空白が出来てしまうので（少し拡大すればもちろん空白は無くなるのですがそれも変です）
困ってます。

＞ちなみにdlに当てるのにoverflowとzoomはとくに必要ないかと。

上記の設定、実はこれは市販のテーマを上書きして作成してます。特にトラブルの原因になっていないのならとそのままにしています

[rossi46hiro]

Chromeの挙動が少しおかしいような気がしましたが、<h4>が原因のようです。
現在「会社概要」「平成25年10月1日現在」の間がスペースで空いているのを、floatを使って左右に分けた場合、問題なく表示されました。
この挙動はよく分かりませんが、おそらくスペースで改行が挟まるとwidth指定を貫通して見かけの横幅が計算されている？様な感じかと。

[Wordpress]

何度も検証ありがとうございます。
確かにスペースを削除すると一旦空白は無くなりました。
コードの基本ですが、「floatを使って左右に分けた」場合のコードですがどのように打たれたのでしょうか？
h4 1{
float:left;
}
h4 2{
float:light;
}

[rossi46hiro]

おっしゃるとおりです。