"@media (max-width: 375px)"でスタイルを切り替えたいのですが、374pxで切り替わります。

前提・実現したいこと

メディアクエリで画面幅が375px以下になった時にスタイルを切り替えたいです。

発生している問題・エラーメッセージ

"@media (max-width: 375px)"と記述し、chromeのデベロッパーツールで画面幅を縮めて確認しているのですが、なぜか375pxではスタイルは切り替わらず、374pxで切り替わります。
また、HTML内の<picture>タグで同じく画面幅375pxの時に画像の切り替えたいのですが、同様の問題が発生します。

自力でも調べましたが、3週間くらいたっても解決できず、先輩方のお力をお借りしたいです。
また、当方コーディング歴2か月弱の初心者ですので、簡単な言葉でご説明頂けるとありがたいです。
よろしくお願いいたします。

該当のソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>・・・</title>
<meta name="description" content="">
<link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&amp;subset=japanese" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/query.css" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src=" https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
      $("#nav-open").on("click", function () {
        if ($(this).hasClass("active")) {
          $(this).removeClass("active");
          $("#nav-bg").removeClass("show");
          $("#nav-content").removeClass("open");
        } else {
          $(this).addClass("active");
          $("#nav-bg").addClass("show");
          $("#nav-content").addClass("open");
        }
      });
    });

    $(function () {
      $(".link a").on("click", function () {
          $("#nav-open").removeClass("active");
          $("#nav-bg").removeClass("show");
          $("#nav-content").removeClass("open");
      });
    });
</script>
</head>
<body>
  <main id="top">
    <section class="firstview">
      <div class="firstview_main">
        <img class="firstview_img" src="images/normal/img_firstview.jpeg" alt="クルーズの写真">
        <div class="firstview_right">
          <picture>
            <source media="(max-width:375px)" srcset="images/hi-res@x2/img_firstview_sp@2x.jpeg">
            <source media="(min-width:376px)" srcset="images/normal/img_firstview_textbg.jpeg">
            <img class="firstview_textbg" src="images/normal/img_firstview_textbg.jpeg" alt="クルーズの写真">
          </picture>
            <h1 class="firstview_ttl"><span class="ttl_sub">この<span class="ttl_large">夏</span>は！</span><br>
              <span class="ttl_main"><span class="ttl_large">家族</span>で<br class="sp"><span class="ttl_large">クルーズ</span>の<span class="ttl_large">旅</span></span></h1>
            <p class="firstview_plan"><strong class="plan_text">お子様<br class="pc">半額&amp;無料<br class="pc">プランあり</strong></p>
        </div>
      </div>

    </section>
</body>
</html>

query.css(切り替えたいスタイル)

@media (max-width: 375px){

  *{
  line-height: 1.7;

  }

  html{
    font-size: 55.6%;
  }

  /*----------------------------------
  共通のスタイル
  ----------------------------------*/

  .sp{
    display: block;
  }

  .pc{
    display: none;
  }

  .point_mainttl, .casualclass_ttl, .qa_ttl, .guide_ttl{
    font-size: 2.444rem;
    width:90%;

  }

  .point_ttl, .casualclass_ttl, .qa_ttl, .guide_ttl{
    margin:60px auto 40px auto;
    /* text-align: left;
    display: inline-block; */
  }

  /*--------------------------------
  ファーストビュー
  --------------------------------*/

  .firstview{
    padding-top: 60px;
  }
  .firstview_img{
    display: none;
  }

  .firstview_right{
    width:100%;
    height:auto;
  }

  .firstview_ttl{
    line-height: 1.5;
    top: 5%;
  }

.ttl_sub{
  margin-bottom:10px;
}

.firstview_plan{
  border-radius: 0;
  padding: 8px 0;
  width: 100%;
  position: absolute;
  bottom: 0;
}

macaron_xxx

2019/05/07 06:11

記載のコードで試しましたが、正常に375pxにてレイアウトが切り替わります。強いて言えば、最後の}が足りないかな。

Chischoco

2019/05/09 04:03

macaron_xxxさん、お忙しい中ご回答ありがとうございます。先ほど私の使っている端末とは別の端末のchromeで確認したところ、正常に375pxで切り替わりました。なぜ私の端末では出来ないのかはまだ分かっていません。chromeの設定が問題なのでしょうか。chromeのバージョンを確認してみましたが、最新でした。ご存知の方いらっしゃいましたらご教示頂きたいです。

yasutomi

2019/05/09 12:46

query.cssをコピーしてquery2.cssを作成後、 query2.css読み込んでも同じでしょうか。いまのところキャッシュの可能性が高いです。

Chischoco

2019/05/10 08:23

yasutomiさん、お忙しいところご回答ありがとうございます。その通り実行してみましたが、375pxで切り替わりませんでした。キャッシュが原因の可能性があるとのご指摘を頂き、デベロッパーツール上部のリロードボタン右クリックで表示する「キャッシュの消去とハード再読み込み」を実行してみましたが変わらずです。また調べたら、右側メニューのsettingsをクリックし、Network欄の「Disable chache」にチェックを入れるとページが更新できるという情報がありましたので実行してみましたが、それもダメでした。

x_x

2019/05/13 08:39

374pxというのはどのように確認したのでしょうか？

Chischoco

2019/05/15 08:13

x_xさん、お忙しいところご回答ありがとうございます。確認方法は、chromeのデベロッパーツールにてデバイスモードを起動し、「Responsive」を選択します。その左側に表示したい画面サイズが入力できるので、スタイルシートに"@media (max-width: 375px)"と記述した通りに動くか確認しようとその入力欄に「375px」と「374px」を入力してみた結果、「375px」ではスマホ用スタイルに切り替わらず、「374px」でしか切り替わらなかったという状況です。

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

回答1件

ベストアンサー

私も試してみましたが、同じ状況でした。
設定を変えて試した所、分かった点は以下の通りです。

・メディアクエリーが見ているのは、ウィンドウ中のスクロールバーを除いた表示範囲
(body要素にサイズ設定していなければ、実質bodyサイズと同じ)
・幅が小数点以下まである時、切り上げして判断される。

つまり、ディベロッパーツールの表示を375に合わせたとしても、実際は375.～と小数点以下まであり、小数点以下を切り上げた376として判断されてしまう。
この小数点以下の数値については、同じくディベロッパツールで見ることができます。(添付「body要素サイズ」参照)

よって、max-widthの値に小数点まで含めた指定をする必要があります。
ただ、デバイスによってピクセル変わると思うのであまり賢い方法ではないかもしれません。
("他の端末で試したら正常"についてもディスプレイの違いだと思われます)

投稿2019/05/14 15:00

編集2019/05/14 15:03

kanetugu_70e

総合スコア100

Chischoco

2019/05/15 09:48

kanetuguさん、お忙しいところご回答ありがとうございます。ご指摘の通りbody要素サイズを確認したところ、幅が小数点以下までありました。なぜ小数点が表示されてしまうのかご回答を参考に自分なりに調べてみた結果、表示倍率が原因である可能性ありましたのでwindowsの設定を確認してみたところ、「拡大縮小をレイアウト」の項目が125％になっていました。ここを100％に変更すると小数点はなくなり375pxぴったりでスタイルを切り替えることができました。原因がわからないモヤモヤがすっきりしました。 kanetuguさんのが回答がなければ、ここまでたどり着けなかったと思いますのでベストアンサーとさせて頂きます。ご回答くださった皆様、ご協力いただき誠にありがとうございました。