実現したいこと
デベロッパーツールで見たスマホプレビューをスマホ実機でも実現したい。
前提
デベロッパーツールで見た画面。
スマホの実機で見た画面
デベロッパーツールで見る限りエラーは出ていません。
該当のソースコード
head/header部分
1<head> 2 <meta charset="UTF-8" /> 3 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 5 <title>PureLeaf</title> 6 <link rel="stylesheet" href="{{ asset('css/tea/style.css') }}" /> 7 <link rel="icon" type="image/png" href="/images/tea/tea.png" /> 8 <link 9 rel="stylesheet" 10 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" 11 integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" 12 crossorigin="anonymous" 13 referrerpolicy="no-referrer" 14 /> 15 @vite('resources/css/app.css') 16</head> 17<body> 18<!-- header section --> 19<header class="hero h-[100vh] relative"> 20 <!-- shop name --> 21 <h1 22 class="plus absolute top-[1rem] left-[1rem] text-4xl md:text-6xl z-10" 23 > 24 PureLeaf 25 </h1> 26 <p 27 class="fixed top-[1rem] right-[1rem] text-xl md:text-3xl z-10 reserve hover:cursor-pointer" 28 > 29 ご購入 <i class="fa-solid fa-cart-shopping"></i> 30 </p> 31 <!-- policy --> 32 <div class="policy-container relative z-10"> 33 <h2 34 class="header-policy absolute top-[8rem] md:top-[12rem] left-[1rem] md:left-[4rem] text-4xl md:text-7xl" 35 > 36 100%オーガニック 37 </h2> 38 <h2 39 class="header-policy absolute top-[11rem] md:top-[18rem] left-[1rem] md:left-[4rem] text-xl md:text-2xl" 40 > 41 茶葉の栽培に厳しいオーガニック基準を適用しています。 42 </h2> 43 </div> 44 <img 45 class="absolute top-[15rem] md:top-[13rem] right-[-5rem] md:w-[40vw] md:h-auto object-cover ml-auto me-[5rem]" 46 src="{{ asset('images/tea/hero.jpg') }}" 47 alt="hero" 48 /> 49 <!-- sns --> 50 <ul 51 class="absolute bottom-[1rem] md:bottom-[1rem] ml-[1rem] list-none z-10 plus list-none" 52 > 53 <li class="sns text-xl hover:cursor-pointer"> 54 <i class="fa-brands fa-twitter me-2"></i>Twitter 55 </li> 56 <li class="sns text-xl hover:cursor-pointer"> 57 <i class="fa-brands fa-instagram me-2"></i>Instagram 58 </li> 59 <li class="sns text-xl hover:cursor-pointer"> 60 <i class="fa-brands fa-line me-2"></i>LINE 61 </li> 62 </ul> 63</header>
試したこと
・きちんと「npm run dev」してます。
・スマホのキャッシュの削除もしました。
補足情報(FW/ツールのバージョンなど)
・レスポンシブで無ければ、(通常のmdサイズのときは)きちんと表示されています。
以上、よろしくお願いいたします。
追記1)
<script src="https://cdn.tailwindcss.com"></script>CDNにしたら上手く行きました。
ただ、mdのときは上手く動作しているのでインストールミスとは考えにくいです。
追記2)
サーバーを再起動したら変化がありましたが、表示が崩れています。

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。