メディアクエリで文字の大きさが変更できない

この質問の続きになります。

WordpressのBeaver builderを使っています。吹き出しを作りたいです。responsive editingの機能を利用してレスポンシブ化しようとしていましたが、HTMLモジュールにはなぜか適用されず、メディアクエリで上書きして、3つのデバイスの区別をしようとしています。

試しに、文字の大きさだけ変えてみたのですが、タブレット版とスマホ版の区別ができていないような気がします。どうすればきちんと修正できるでしょうか？？

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<style>

.balloon {
  min-width: 80%;
  width: 100%;
  margin: 1.5em auto;
  overflow: hidden;
  display: flex;
}

.balloon.right {
  flex-direction: row-reverse;
}

.balloon .faceicon {
  margin: 0 10px 0 10px;
  /*以下２つでFaceiconの大きさをResponsive editingする*/
  width: 25%;
  max-width: 150px;
  flex-shrink: 0;
}

.balloon .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #F0F0F0;
  border-radius: 50%;
}

.balloon .chatting {
  display: inline-block;
  max-width: 400px;
  width: 72%;
  /*height: 100%;*/
}

@media screen and (max-width:767px) {/*スマホ版*/
.says {
  position: relative; 
  margin: 5px 15px 0 15px;
  padding: 5px 10px;
  border-radius: 12px;
  background: #d7ebfe;

      }
 .says p {
  margin: 0;
  padding: 0;
  font-size: 5px;/*文字のサイズ５px->おそらく効いていない*/
         }
 .says span {
  color:#73683b;
  font-size: 10px;
         }
}

@media screen and (min-width:768px) and ( max-width:991px) {/*タブレット版*/
.says {
  position: relative; 
  margin: 5px 20px 0 20px;
  padding: 1em 13px;
  border-radius: 12px;
  background: #d7ebfe;
      }   
.says p {
  margin: 0;
  padding: 0;
  font-size: 10px;/*文字のサイズ10px*/
        }
.says span {
  color:#73683b;
  font-size: 10px;
        }
}

@media screen and (min-width:992px) {/*PC版*/
.says {
  position: relative; 
  margin: 5px 20px 0 20px;
  padding: 15px 50px;
  border-radius: 12px;
  background: #d7ebfe;
　　　 }
.says p {
  margin: 0;
  padding: 0;
  font-size: 20px;/*文字のサイズ20px*/
        }
.says span {
  color:#73683b;
  font-size: 10px;
        }
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  border: 12px solid transparent;
}

.left .says:after {
  left: -24px;
  border-right: 12px solid #F0F0F0;
}
.right .says:after {
  right: -24px;
  border-left: 12px solid #F0F0F0; 
}

</style>
</head>

<body>
 
<!--吹き出しはじまり-->
<div class="balloon left">
  <div class="faceicon">
     <img src="https://kokotamaya.com/wp-content/uploads/2020/08/スクリーンショット-2021-11-23-12.16.53.png"><!--ここで90✖︎90の文字を変えてる-->
  </div>
  <div class="chatting">
    <div class="says">
      <p><span>ああああああああああああああああ</span></p><!--spanタグでインライン指定-->
      <p>あああああああああああああああ</p>
      <p>あああああああああああ</p>
       <p>ああああああああああああああああ</p>
       <p>ああああああああああ</p>
    </div>
  </div>
</div>
<div class="balloon right">
  <div class="faceicon">
     <img src="https://kokotamaya.com/wp-content/uploads/2020/08/iOS-の画像-2-e1637758393449.jpg">
  </div>
  <div class="chatting">
    <div class="says">
        <p><span>ああああああああ</span></p>
      <p>ああああああああああああああああああああ</p>
    </div>
  </div>
</div>
<div class="balloon left">
  <div class="faceicon">
     <img src="https://kokotamaya.com/wp-content/uploads/2020/08/スクリーンショット-2021-11-23-12.16.53.png">
  </div>
  <div class="chatting">
    <div class="says">
     <p>あああああああああああああああ</p>
     <p>あああああああああああああああああああああああああ</p>
    <p>ああああああああああああああああああああああああああああああああああああ</p>
    </div>
  </div>
</div>
<div class="balloon right">
  <div class="faceicon">
     <img src="https://kokotamaya.com/wp-content/uploads/2020/08/image-e1637654839625.jpeg">
  </div>
  <div class="chatting">
    <div class="says">
      <p>ああああああああああああああああああああああああああああああああああああああああああああああああ</p>
      <p>あああああああああああああ</p>
    </div>
  </div>
</div>


</body>

行動規範の内容に同意します

回答3件

自己解決

SP版、タブレット版、PC版の全てをきちんと区別できるようにはならなかったが、SP版/タブレット版、PC版、SP版、タブレット版/PC版の区別はできるようになりました！

メディアクエリを使用し、境界の値を調節することが重要でした。

投稿2021/12/27 04:39

nitori-kun

総合スコア62

多分SP版は画面に合わせてページがリサイズされているのではないかと推測

<head>内に拡大縮小をしないviewportの設定を記述

html
1<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=1">

スマホのブラウザの文字サイズ自動調整
text-size-adjustで無効化できます

css
1html{-webkit-text-size-adjust:none;text-size-adjust:none;}

投稿2021/12/20 04:40

編集2021/12/21 01:56

KazuhiroHatano

総合スコア7804

nitori-kun

2021/12/27 04:35

実装してみました！１つ質問があります！wordpress内で確認はできるのでしょうか？実機に繋がないと確認はできないような気がしたのですが、、、返信遅れて申し訳ありません！

KazuhiroHatano

2021/12/27 04:57

WordPressの記事投稿画面のプレビューは全く信用できません UAどころか画面サイズの情報も合ってません、メディアクエリが全然効きません Safariのレスポンシブモードもイマイチです実機とviewportのサイズ調整の挙動が違います Chromeの検証がブラウザのシミュレータの中では最も実機に近いですが、操作感とか細かい挙動は少し違います XcodeのSimulatorが一番信用できますアプリケーション＞Xcode→右クリック→パッケージの内容を表示→ Contents>Developer>Applications>Simulator　にいます

nitori-kun

2021/12/30 12:53

ありがとうございます。参考にさせていただきます。

行動規範の内容に同意します

メディアクエリについては、適切に反映されており原因として

タブレット: 10px
スマホ: 5px

のように宣言しており、chromeの表示する最小pxが10pxのため変更されていない状態になります。

なので、検証としてfont-sizeの変更を行いたいのであれば

パソコン: 20px
タブレット: 15px
スマホ: 10px

のようにすれば検証できると思います。

スマホでfont-size 10px以下の文字を表示したいのあれば、以下が参考になると思います。
https://qiita.com/flatsato/items/cbd27a3374d0701ac820

追記

PC

tab

sp

投稿2021/12/19 02:37

編集2021/12/19 08:15

jackmiwamiwa

総合スコア395

nitori-kun

2021/12/19 07:53

パソコン: 20px タブレット: 15px スマホ: 10px のように修正してみたのですが、やはりスマホ版がタブレットにつられて15pxになってしまいます。(タブレットとスマホの区別がつきません。)

jackmiwamiwa

2021/12/19 08:17 編集

回答の部分に画像を追記しましたが、メディアクエリ自体は聞いていると思うので、ウィンドウサイズを適切に検証できていないのが理由だと思うのですが、いかがでしょうか？

nitori-kun

2021/12/27 04:36

ウィンドウサイズを色々いじってみましたが、SP版、タブレット版、PC版3つを綺麗に分けるのはうまくいきませんでした。ただ、SP版、タブレット版/PC版、SP版/タブレット版、PC版の区別はできるようになったので、別々のページに実装しようと思います！メディアクエリについて学ばせていただき、本当にありがとうございました！

行動規範の内容に同意します

あなたの回答