-
ID:/R5M4f さんの質問

WEB制作初心者です。
レスポンシブでスマホ用サイトのcssが一部反映されない原因は何でしょうか?

PC用とスマホ用にレスポンシブの記述をしました。
PC画面上はcssが反映されていて想定通りの動きをするのですが、
スマホで見ると一部ページのcssが反映されません。
(うまくいくページといかないページが混在している状態)

PC用は
@media screen and (min-width: 769px) {}
でくくり、

スマホ用は
@media screen and (min-width: 320px) and (max-width: 768px){}
でくくっています。

原因がわかる方、お教えください。

みんなの回答 5 件

ID:4hRg8C さんの回答

確認してるスマホの幅が、768以上なんじゃないの?
PCでウィンドウ幅狭くして、切り替わるか確認してごらん。

ID:/R5M4f

回答ありがとうございます。
iPhone6sなので、幅は問題ないかと思います。
PC上では全ページ768pxで表示が切り替わるのですが、スマホで開くと一部切り替わらない状態です。
たとえば、PC用ではグローバルナビゲーションを横並びにしていますが、スマホ用ではjQueryのアコーディオンで開閉するように書き分けています。
これらの記述はdefault.cssで統一で行っているので、ページによってスマホ用メディアクエリが反映されたりされなかったりすることの原因がわかりません。
知識不足で恐縮ですが、もし分かればご教示願います。

ID:4OCx4O さんの回答

提示されている情報だけでは原因の特定が難しいですね。。
viewportの指定はどうなっていますか?

ID:AyZ9Vi さんの回答

cssが読み込まれていないか、他のcssで上書きされているか、のどちらかだとは思います。developer toolsはご存じですか、それを使って該当箇所のcssを見てみるといいと思います。

ID:TsCIWL さんの回答

詳細度を見なおしてみてはいかがでしょうか?

ID:x.QHb4 さんの回答

ちなみにその設定でタブレットではちゃんとpc表示されていますか?

最終更新日:2016-03-03 (2,726 views)

関連するトピックス

ページ上部に戻る