同じheader.phpを共有しているはずなのに、一部のスマホページのヘッダー表示だけが崩れる時の対処法

Question

![![イメージ説明]WIDTH:256]
![![イメージ説明]WIDTH:256

同じソースコードで記述しているはずなのに、前者のURLだと白いバーがきれいに二段に見えて、後者のURLだと白いバーの二段目が汚く表示されます。
(スマホから見た場合)

なぜこのように崩れてしまうのかご教示いただければ幸いです。Wordpressをつかっているのですが、後者のURLでも前者のURLのように白いバーがきれいに二段に見えるようにする方法もご教示いただければ幸いです。よろしくおねがいします。

http://skypeeveryday.com/?page_id=187
http://skypeeveryday.com/?p=584

Answer 1

page_id=187では style.css
p=584では style-v2.cssが読み込まれています
異なるCSSを読み込んでいるから見た目も違うのではないでしょうか？

なぜ読み込まれるCSSが変わってしまうのかは、現状の情報からだと判断が付きません。

• wordpressが内部で分岐させてる
• 実は同じheader.phpじゃない

とかでしょうか。

Answer 2

２枚目のメニュー２段目の背景白が狭いということですね。
iPhoneで拝見させてもらったのですが普通でしたので、"一部のスマホページ"というのはAndroidを指すのでしょうか。

「android 崩れる」でググれば結構出てきます。（皆さんandroidにはお怒りのご様子。。。）
どれか該当しないでしょうか？

https://www.google.co.jp/search?q=android+%E5%B4%A9%E3%82%8C%E3%82%8B&oq=android+&aqs=chrome.1.69i57j69i59j69i61l2.4532j0j4&sourceid=chrome&es_sm=122&ie=UTF-8

Answer 3

CSS対応の問題なのでは無いでしょうか？
SPコンテンツの場合、機種依存が有ると聞いた事が有ります。

私は、SPの前フューチャーフォンの開発をしていた時にそんな不具合に遭遇した経験が有ります。

勿論、SPのブラウザはかなり進歩しているらしいですが、はやりOSのバージョンで多少デザインが異なるのではないでしょうか？

Answer 4

もう少し具体的に症状を書いたほうが回答がしやすいとおもいます。

• 使っているブラウザ
• 綺麗とか、汚いとか定性的な言葉より、具体的な言葉を。