@mediaの設定が一部（スマホ）だけローカルでは反映されるのにWEB上で反映されない

メディアクエリの設定をCSSでしていますが、添付画像のようにバナーのh1とpの部分だけスマホサイズが適用されません。　ローカル環境ではうまくいくのですが、WEB上では (max-width: 767px)の設定が反映されていません。

なぜなのでしょうか？

また、スマホで表示するとFontoFamilyも明朝っぽくなってしまいます。

ローカルとWEB上でなぜ表示が違ってしまうのか、謎です。

!important をつけたりしてみましたが改善されず。
なんとかしてiPhoneXできれいに表示できるようにしたいです。

よろしくお願いします。

CSS
1 @media screen and (max-width: 767px) {
2      /* .banner-div h1 {
3      font-size: 45px; }
4      .banner-div p {
5      font-size: 18px; } */
6      section.banner-blog .banner-div h1 {
7      font-size: 32px; }
8
9      button#contact-submit {
10       margin-bottom: 20px;
11      }
12      .post-slide {
13      margin-bottom: 30px;
14      }
15      .port-filter ul li {
16        margin-bottom: 15px;
17      }
18      .page-title-div h1 {
19      font-size: 35px !important;
20      font-weight: 700;
21      letter-spacing: 0px;
22      color: #fff;
23      }
24        .about .about-img img {
25        position: relative;
26        width: 100%;
27        z-index: 1;
28        box-shadow: none;
29        }
30        .portfolio .port-filter ul li {
31            margin-right: 15px;
32        }
33        .social-icons a {
34            margin-bottom: 10px;
35            display: inline-block;
36        }  
37        form#contact-form textarea {
38            height: 170px;
39            border-radius: 0px;
40            margin-top: 0px;
41        }  
42        form#contact-form input {
43         margin-bottom: 30px;
44        } 
45        .counter-area .counter-item h2 {
46              font-size: 35px;
47          } 
48        .testi-description {
49            font-size: 16px;
50        }
51    .contact-info {
52        margin-top: 50px;
53    }
54            .blog-grid .mb-20 {
55              margin-bottom: 5px !important;
56          }
57        .main-title h4 {
58            font-size: 35px;
59            text-transform: uppercase;
60            margin-bottom: 5px;
61            font-weight: 700;
62        }
63          .main-title h6 {
64              font-size: 12px;
65          }
66          .post-slide{
67            margin-bottom: 50px;
68          }
69        .service-item {
70          margin-bottom: 50px;
71        }
72        .project-img img {
73    height: 100%  ;
74}
75.project-img {
76    margin-bottom: 50px;
77}
78         }
79
80      @media screen and (max-width: 375px){
81
82            .banner-div h1 {
83            font-size: 15px; }
84            .banner-div p {
85            font-size: 8px; }
86            .header-name  {
87              font-size: 15px; }
88            .cd-headline {
89              font-size: 8px; }
90  
91
92      .main-title h4 {
93      font-size: 35px;
94      }
95      .main-title h6:before {
96      display: none;
97      }
98      .main-title h6:after {
99      display: none;
100      }
101        table.info-table i {
102            display: none;
103        }
104      span.about-btn a {
105      margin-top: 15px;
106      }
107
108      span.about-btn {
109      display:  inline-block;
110      }
111      .about .about-img img {
112          position: relative;
113          width: 100%;
114          z-index: 1;
115          box-shadow: none;
116      }
117      .banner-div {
118                left: 0;
119                text-align: left;
120                padding-left: 15px;
121
122            }
123        table.info-table span {
124            font-weight: 500;
125            font-size: 13px;
126        }
127        .info-table td {
128            padding-left: 8px;
129            font-family: "Open Sans", sans-serif;
130            display: inline-block;
131            font-size: 13px;
132        }
133        .div-btn {
134            padding: 6px 10px;
135        }
136        .arrow-center {
137            position: absolute;
138            bottom: 10vh; 
139            width: 100%;
140             text-align: left; 
141            z-index: 11;
142
143            left: 15px;
144            padding-left: 0px;
145        }
146      }
147
148

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5
6        <meta charset="utf-8">
7        <meta http-equiv="x-ua-compatible" content="ie=edge">
8        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
9        <meta name="keywords" content="Personal, Portfolio, Creative,Design,mordan">
10        <meta name="description" content="AKYは、フリーランスエンジニアのAkiyoが制作を手がけるWEBページ制作ラボです。ホームページ、LPの制作や記事の執筆などをリーズナブルな価格でご提供します。">
11        <meta name="keywords" content="ホームページ 制作, ホームページ  会社, ホームページ フリーランス,ライティング 依頼">
12        <meta name="author" content="Akiyo Hayakawa">
13
14        <title>AKY WEBページ制作ラボ</title>
15
16        <!-- favicon -->
17        <link href="assets/images/Favicon.ico" rel="icon" type="image/png">
18
19
20        <!--Font Awesome css-->
21        <link rel="stylesheet" href="assets/css/fontawesome-all.css">
22
23        <!--Bootstrap css-->
24        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
25
26        <!--Owl Carousel css-->
27        <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
28        <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
29
30        <!--Magnific Popup css-->
31        <link rel="stylesheet" href="assets/css/magnific-popup.css">
32        <link rel="stylesheet" href="assets/css/animate.min.css">
33        <!-- Google Fonts -->
34        <link href="https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600,700,800,900%7cOpen+Sans:400,600,700,800" rel="stylesheet">
35
36        <!--Site Main Style css-->
37        <link rel="stylesheet" href="assets/css/style.css">
38       
39
40        <!-- Twitter card -->
41        <meta name="twitter:card" content="summary_large_image">
42        <meta name="twitter:site" content="@aki_aki_aki_a">
43        <meta property="og:url" content="http://127.0.0.1:5500/Template/index.html">
44        <meta property="og:title" content="AKY WEBページ制作ラボ AKY">
45        <meta property="og:description" content="AKYは、フリーランスエンジニアのAkiyoが制作を手がけるWEBページ制作ラボです。ホームページ、LPの制作や記事のライティングなどをリーズナブルな価格でご提供します。">
46        <meta property="og:image" content=".png">
47
48        <script src="https://sdk.form.run/js/v2/formrun.js"></script>
49        
50    </head>
51
52    <body>
53
54        <!-- <script>
55        var value = devicePixelRatio;
56        console.log(value);
57        document.body.appendChild(
58            document.createTextNode(value)
59        );
60
61        </script> -->

x_x

2020/01/14 01:56

同じ画像のように見えますがどこか違うのでしょうか？

aki_aki_aki_a

2020/01/14 08:45

大変失礼しました。画像のアップロードが上手くいっていませんでした。再度アップしましたので、よろしくお願いいたします。

x_x

2020/01/14 09:03

画像を見たところ max-width: 375px のほうが効いていて問題ないように見えます。端末は何でしょうか？

x_x

2020/01/14 09:19

失礼、iPhoneX と書いてありましたね。 iPhone X の CSS ピクセルは 812 x 375 だそうです。縦にして表示しているのでしょうか？

aki_aki_aki_a

2020/01/14 09:24

はい、縦に表示しています。上の画像はローカルでの表示でmax-width: 375pxが効いているのですが、下の画像はWEB上での表示で、max-width: 767pxが優先されて、375PXのスマホ表示CSSが効かなくなってしまうのです。　ちなみに、HTMLのheadタグ内にはviewportの設定は記述してあります。

x_x

2020/01/14 10:08

不思議ですね。念のため、devicePixelRatio の値を確認してもらえますか？

aki_aki_aki_a

2020/01/14 10:37

devicePixelRatio の値、初めて聞いたので調べて試してみましたが、consoleの結果は　 Failed to load resource: net::ERR_FILE_NOT_FOUND　のエラーメッセージと、値は　３　でした。

x_x

2020/01/14 10:43

3であってますね。ところで画像を見比べていて微妙に行数が異なることに気付いたのですが、ローカルと異なる CSS になっていませんか？キャッシュが残っているとか

aki_aki_aki_a

2020/01/15 00:28

キャッシュは消しました。ローカルと全く同じファイルでアップロードしなおしたりしているのですが、改善されないです・・・。

x_x

2020/01/15 04:23

確認します。 2020/01/14 18:24 のコメントから、上の画像：375px が適用されている。ローカル下の画像：767px が適用されている。WEB ですが、これと質問文での「ローカル環境ではうまくいくのですが、WEB上では (max-width: 767px)の設定が反映されていません。」は矛盾しています。どちらが正しいのかを確認してください。また、アップロードはどのようにしていますか？

aki_aki_aki_a

2020/01/15 05:02

誤字脱字、失礼しました。「・・・WEB上では (max-width: 767px)の設定しか反映されていません。」 WEB上で、375px の設定が適用されるようにして、スマホで表示した時にバナーの文字サイズを小さくしたいのです。また、アップロードはCyberduckを使用しています。ローカルに置いてあるHTMLファイルを修正し、ローカル環境で表示を確認したあと、Cyberduckにそのファイルをアップロードしています。

x_x

2020/01/15 06:15

Cyberduck を使ったことがないのですが、設定で転送モードがアスキーではなくバイナリに、重複ファイルを上書きするようになっているかを確認してみてください。それと、下の画像では style.css に 375px の記述があるか確認できないので、style.css をクリックするなどして確かめてもらえますか？

aki_aki_aki_a

2020/01/15 09:04

「下の画像では style.css に 375px の記述があるか確認できないので」 ↑CSSの記述は記載の通りなのですが、WEB上でデベロッパーツールを開くとその部分が表示されていないんです。 Cyberduckに転送モードがアスキーかバイナリかの設定項目が見当たらず、調べてみましたがわかりませんでした。環境設定の転送の部分の画像を添付します。

x_x

2020/01/15 09:11

やはり何らかの原因で CSS ファイルが違うみたいですね。 Cyberduck の使い方はこちらもわからないので、いったんサーバーの style.css を削除して消えたことをブラウザで確認した後、もう一度 style.css をアップロードしてみてはどうでしょうか？

aki_aki_aki_a

2020/01/15 10:06

やってみました。が、同じ状況でした・・・。

x_x

2020/01/15 12:57

そうなると、アップロードしているファイルが編集しているファイルと違うものなのではないかと……

aki_aki_aki_a

2020/01/15 21:23

それも、何度も確認して、やり直したりしてるんですが、、、。

FKM

2020/01/20 00:47

メタ情報も含めて、htmlのヘッダ部分を見せてもらってよろしいですか？

makosankibu

2020/01/20 00:58

サーバー(リモート上)にあるファイルを直接中身見てみて上記の該当の記述が存在するか確認すればよいのでは? また、下記サイトは役に立ちますでしょうか https://oshiete.goo.ne.jp/qa/7467042.html

aki_aki_aki_a

2020/01/20 01:23 編集

ｈｔｍｌのヘッダ部分を追記しました。よろしくお願いします。（この件とは関係ないですが、ちなみに、bodyの部分に初めから記載してあるscriptの記述は、よくわからないエラーが出るのでコメントアウトしてあります。）

aki_aki_aki_a

2020/01/20 01:22

リモート上で直接ファイルを見てみましたが、該当部分の記述はローカルのものと同じで存在していました。

FKM

2020/01/20 02:01 編集

bodyの後のスクリプトが気になりますね。jsはhtmlのようなコメントアウトをしても通る（昔はわざとコメントアウトさせる記法が主流だったぐらい）ので、一度エディタに退避させてから、抹消してみてください。おそらく関数名からしてデバイスによって文字サイズを制御するスクリプトっぽいので、ＣＳＳと干渉している可能性があります。

makosankibu

2020/01/20 02:31

devicePixelRatioはwindowのプロパティです。スクリプトは関係ないと思います

makosankibu

2020/01/20 02:38

今気づいたのですが、画面の画像を見たところ、h1の大きさが異なってませんか? 二枚目のh1の要素の大きさが375.333pxになっているところを見ると、ビューポートの設定で問題があるように思えます

aki_aki_aki_a

2020/01/20 03:06

line-hightの設定で、文字サイズが大きくなると要素自体も広がるということでは無く、ビューポートの設定に何か問題があるのでしょうか？　ビューポートの設定はhtmlの記述の部分にしてあります。どこか間違っていますでしょうか？

aki_aki_aki_a

2020/01/20 03:07

念のためスクリプトの記述は削除してみましたが、変化なしです。

makosankibu

2020/01/20 04:05

拡張縮小を封じてるのが気になりますが、本件に関しては特に問題ない指定と思います。となると、ソースコードの問題ではなくて、Cyberduckの問題と存じます。私が上記したURL先に記載されている、アクセス権についてはもう調べましたでしょうか。現象が似ているので、これじゃないかなぁと思ってます。それで解決しないのであれば、申し訳ありませんが、現在の情報では私はわかりません...

aki_aki_aki_a

2020/01/20 04:39

Cyberduckのアクセス権は正常でした！

FKM

2020/01/20 23:58

他のブラウザでも同じ現象が発生するでしょうか？ Chrome、Firefox、IEなどで検証してみてください

aki_aki_aki_a

2020/01/21 00:30

なんと、何が影響したのかわかりませんが今日見たらiOsでちゃんと表示されていました！ただ、h1のフォントサイズはCSSの指定通りになってくれたのですが、fontFamilyがなぜか明朝体になるのが直りません。（iOSでの表示のみ）。 <html lang="ja">の指定を消してみたりしたのですが、ダメみたいです。

FKM

2020/01/21 12:29 編集

font-family: "Open Sans", sans-serif; これって欧文フォントなので、日本語2バイト文字に対応してたでしょうか？ない場合はブラウザのデフォトフォントになったりすることもあります。

aki_aki_aki_a

2020/01/22 00:17

font-family: "Open Sans", sans-serif; が指定してあるinfo-tabel td部分は、英数字のみなので大丈夫だと思います。