サーバーにファイルをアップロードした際、スマートフォンの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
の中に以下の記述があるか確認
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー