Q&A
Server+は資格なので本件とは関係ないかと思います。
https://teratail.com/tags/Server%2B
サーバーにファイルをアップロードした際、スマートフォンのCSSを反映させたい
HTML/CSSにてLP制作をしております。
（WordPress化は無し・レスポンシブ対応はスマートフォンのみです。）
Chromeのディベロッパーツール上でのPC/スマートフォン（iPhone6/7/8）の動作確認完了後、
エックスサーバーにファイルをアップロードし、実機で確認してみたところ、
PC上ではCSSの反映ができたのですが、
■■スマートフォン上では、CSSのメディアクエリ部分で記述したものを反映させることができませんでした。
（PCのCSSがそのまま反映されてしまっている）
サーバー自体に慣れておらず、知識が足りないというものあると思います。
原因を教えていただけたらと思います。
初学者のため、質問内容にも不備があると思いますが、
どうぞよろしくお願いいたします。
発生している問題・エラーメッセージ
調べたところ、関係があるかわからなかったのですが、Chromeのディベロッパーツール上に以下の表示が出ています。
Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform
該当のソースコード
HTML
1<!DOCTYPE html> 2 <html lang="ja"> 3 <head prefix="og: https://ogp.me/ns#"> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="css/reset.css"> 8 <link rel="stylesheet" href="css/style.css"> 9</head> 10<body> 11 12<header> 13</header> 14 15<main> 16</main> 17 18<footer> 19</footer> 20 21<script src="https://kit.fontawesome.com/41c89b4080.js" crossorigin="anonymous"></script> 22<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 23<script src="js/script.js"></script> 24</body> 25</html>
CSS
1@charset "UTF-8"; 2 3 4====以下スマートフォン適用のcssの記述==== 5@media screen and (max-width:375px){ 6} 7
試したこと・確認したこと
- サーバー側からのブラウザのキャッシュの削除
- ブラウザ（Chrome）のキャッシュの削除
headの中に以下の記述があるか確認
よろしくお願いいたします。
ローカルでの実機確認はしましたか？ また、実機は何でしょうか？ (最近の iPhone の横幅は 375px よりもっとあるような…。)
ローカルでの確認はしていません。
実機は、iPhone 12proです。
PC での疑似的なスマホ表示はあくまでも疑似的なものに過ぎませんので、たまには実機でも確認することをお勧めします。
https://tomo-co.online/blog/2021/06/30/machine/
また、iPhone 12 Pro の横幅は 390px、Pro Max は 428px です。Android はもっといろいろありますので、ブレークポイントは余裕をもって設定するのが良いかと。
https://crestadesign.org/responsive/
こちらは回答ではなく質問への追記修正依頼のコメント欄です。
質問は編集できるので適宜調整してください。
回答1件
0
自己解決
お恥ずかしながらご指摘いただき気づいたのですが、
実機での横幅が375px以上あったため、CSSが反映されていなかったようです。
メディアクエリのブレイクポイントの変更をいたしました。
CSS
1@charset "UTF-8"; 2 3 4====以下スマートフォン適用のcssの記述==== 5@media screen and (max-width:599px){ 6}
とても助かりました。
どうもありがとうございました。
投稿2022/01/04 04:00
総合スコア6
あなたの回答
tips
プレビュー
