wordpressサイトです。
header.phpにはviewportをこのように入れてあります
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
style.cssは
PC用のCSS /****************************** ★ Media Queries スマフォ表示の設定(599px以下で読み込むcss) ******************************/ @media screen and (max-width: 375px) { スマホ用CSS }
という風に組んでおりまして、
Googleデベロッパツールで確認しながらレスポンシブの調整をしておりました。
Googleデベロッパツールは問題なくスマホ用にレイアウトされているのにスマホ実機ではPCの表示のままで一部でもCSSが効いているという箇所はないです。
何が原因でしょうか。
実機ではシークレットモードでも確認しましたがダメでした。
実機と幅が違うからではないかなと予想してますが、mediaのmax-widthを調整してもダメですか?
回答ありがとうございます!599pxで指定しても375pxで指定してもダメです・・
具体的にどの機種でしょうか? いまのスマホは結構高解像度です。
iPhone7です
実機は横にしていないでしょうか?
横にしていません、プラグイン系も1つずつオフにしてみましたがダメです・・
サイト全体がレスポンシブしないのでしょうか?特定のページのみでしょうか?また、簡易的に大まかなブロック分けで良いので、症状が再現できるコードを提示して頂くと、より良い回答を得れると思います。
-追記-
他の方とのやり取りをみると、CSSが適用されていないだけの感じがしますが、サーバーへのUP済で良いのですよね?また、スマホ側のキャッシュクリアや他の実機はどうなのでしょうか?他の実機でも適用されていないのであれば、CSSの設定が問題ではないでしょうか?
回答4件
あなたの回答
tips
プレビュー