メディアクエリで指定したmin-widthと全く異なるwidthで変化が起きてしまいます

前提・実現したいこと

メディアクエリのmin-widthで指定した通りの値でCSSを適用させたい

HTML及びCSSでサイト（https://flowr.is/）のヘッダーの模写をしております。
そして画面の幅に応じてappstoreとgoogleplaystoreのバッジを非表示にさせようとしています。

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

指定したmin-widthのpxと異なるpxでバッジが非表示になってしまいました。
画面幅を伸縮させながら、デベロッパーツールで確認してみると、
.download_pcのボックスモデルのコンテンツ部分のwidthの表示形式が、
ある時点でpx表記から％表記に代わってしまっていて、その現象と同時点で
バッジも非表示になっていることがわかりました。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6  <title>FLOWER</title>
7  <link rel="stylesheet" href="../css/styles.css">
8  </head>
9  <body>
10    <header>
11     <div class="logo"> </div>
12       <h1>かわいいが届くお花便</h1>
13       <div class="content">
14         <div class="download_pc">
15          <div class="container">
16            <a href="https://apps.apple.com/jp/app/id1434272434"><div class="badge_appstore"></div></a>
17            <a href="https://play.google.com/store/apps/details?id=co.rollcake.flower"><div class="badge_googleplaystore"></div></a>
18          </div>
19         </div>
20         <div class="footnote">
21           <p>*北海道、沖縄、離島エリアは現在対象外です</p>
22         </div>
23       </div>
24    </header>

CSS
1body{
2  margin: 0;
3  padding:0;
4  letter-spacing:0.05rem;
5  line-height:1.6;
6  font-size: 14px;
7}
8header{
9  background-image:url(../img/bg_header_pink-4704d42ed44908fb061e80afc515a93ab2fcbfd605c2580de486a4d980b2115a.jpg) ;
10  background-size: cover;
11  background-position:center;
12  box-sizing: border-box;
13  display: block;
14  font-family: "Noto Sans JP", sans-serif;
15  height:100vh;
16  min-height: 660px;
17  text-align: center;
18  color: aliceblue;
19  padding-top:48px;
20  position: relative;
21  text-size-adjust:100%;
22}
23
24header h1{
25   font-size: 20px;
26   color: #fff;
27   margin: 16px 6vmin 24px;
28}
29.logo{
30    background-image: url(../img/header_logo-0dbc9cb7c037472d3bf71fde0c1d3efd708c2c2547e9ed3e420051ca826cdad8.png);
31    background-size: contain;
32    background-repeat: no-repeat;
33    background-position: center;
34    height: 116px;
35    width: 131px;
36    margin: 0 auto 16px;
37    margin-top: 5vh;
38 }
39 .content{
40   margin: 0 auto;
41   text-align: center;
42   padding-top: 260px;
43   position: absolute;
44   bottom:24px;
45   right: 0;
46   left: 0;
47 }
48.download_pc{
49  padding: 24px 16px;
50  height: 97px;
51  width: 100%;
52}
53
54.container{
55  display: flex;
56  flex-direction: row;
57  justify-content: center;
58}
59
60a{
61  color: #4183c4;
62  text-decoration: none;
63}
64
65.badge_appstore{
66  width: 164px;
67  height: 49px;
68  background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/Badge_Appstore-9f3fcecf66049829e600e6a1299fa1671b7c66c829f4a2a34ffd43ce946a71d7.png) ;
69  background-size: cover;
70  margin: 0 auto;
71  margin-right: 16px;
72}
73.badge_googleplaystore{
74  width: 164px;
75  height: 49px;
76  background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/Badge_Googleplaystore-8a4acc6f065bfdaafb2029998f0a464d0ac4571b2b89210218c71e1ae4c8078a.png) ;
77  background-size: cover;
78  margin: 0 auto;
79 }
80.footnote{
81  margin:24px auto;
82  }
83
84  .footnote p{
85    margin-bottom: 4px;
86  }
87
88  @media screen and (min-width:767px) {
89    .download_pc{
90      display: none;
91    }
92  }

試したこと

CSSの.download_pcのwidthの表記をpx表記にしたり、％表記にしたりなどの試しをしましたが変化なしでした。

補足情報（FW/ツールのバージョンなど）

・模写しているサイトのURL
https://flowr.is/

hatena19

2021/01/07 11:54

現状のメディアクエリの設定は、画面幅が767px以下で表示、767pxより大きければ非表示ですが、それがご希望のことですか。もし、ご希望が、画面幅が767px以下で非表示、767pxより大きければ表示ならば、下記になります。 media screen and (max-width:767px) {

actlikeJohnnys

2021/01/07 13:41 編集

ご返信ありがとうございます。後者のほうですね！最初の僕のコーディングが違いました。ただそこを直しても、767pxではなく689pxになってしまいます、、

Lhankor_Mhy

2021/01/08 02:24

ご提示のコードを試してみましたが、問題が再現しませんでした。ご提示いただいていない部分のコードが原因かもしれません。

actlikeJohnnys

2021/01/08 07:24

試していただきありがとうございます！一応僕が記述したコードは全て提示させてもらっているので、コード以外で問題が発生しているのでしょうか？例えば、Chromeかそれ以外かなど、、、

Lhankor_Mhy

2021/01/08 07:27

何が原因かについては、現象が確認できていないので、わかりかねます。

actlikeJohnnys

2021/01/08 07:29

さすがにそうですよね。。ご回答してくださり、ありがとうございました！

Lhankor_Mhy

2021/01/08 07:38

サンプルを提示します。 https://jsfiddle.net/Lhankor_Mhy/g3u0xvf1/ こちらのサンプルは、 actlikeJohnnysさんの環境では問題が再現しますか？

actlikeJohnnys

2021/01/08 13:34

全く問題が発生してないです！！

Lhankor_Mhy

2021/01/09 00:57

であれば、環境の問題ではないことになりますね。サンプルはご提示いただいたコードほとんどそのままですので、actlikeJohnnysさんのコードとの違いを探せば原因がわかるのではないでしょうか。

actlikeJohnnys

2021/01/09 06:34

そうですね。違いを探してみます。また、自分で書いたコードを元々使っていたchromeではなくedgeで開いたところ問題が発生しなかったことも分かりました。ブラウザの影響もあったのかも知れません。サポートしていただきありがとうございました。

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

回答1件

自己解決

ブラウザは元々chromeを使っていたのですが、試しにedgeで開いたところ問題が発生しなかった
ことが分かりました。

投稿2021/01/09 06:36

actlikeJohnnys

総合スコア8

actlikeJohnnys

2021/01/26 09:56

いまさら分かったのですが、原因はChromeの画面表示を90％に縮小していたことでした。画面表示はデフォルトの100％じゃないとデベロッパーツールを開いたときに、サイトの右上に表示されるpxが異なってしまうようです。※画面表示の拡大縮小のやり方は、Ctrlを押しながらマウスのホイールを回転させるだけです。

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