iphone11で@mediaが効かない

Google CromeでPCでページを表示させた場合

のようになり、画面幅を縮小した場合

のように、背景の1枚目が変わり、Responsiveという文字が真ん中にくるデザインです。

これをiphone11で表示した場合

のようになってしまい、@mediaが効きません。

resoponsive.html

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta name="viewport" content="width=device-width,initial-scale=1"></head>
5    <meta charset="utf-8">
6    <title>Resonsive</title>
7
8    <link rel="stylesheet" href="stylesheet3.css">
9    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
10  </head>
11
12  <body>
13    <div class="box">
14        <div class="bgImg src1"></div>
15        <div class="bgImg src2"></div>
16        <div class="bgImg src3"></div>
17        <div class="bgImg src4"></div>
18        <div id="rumi" class="boxString">Responsive</div>
19    
20   
21    </div>
22    
23
24    <div class="menu">
25        <ul>
26            <li id="home">Home</li>
27            <li id="profile"><a href="profile.html">Profile</a></li>
28            
29            <li id="pr"><a href="pr.html">PR</a></li>
30            <li id="yout"><a href="youtube.html">Youtube</a></li>
31        </ul>
32    </div>
33
34
35
36    <script src="script1.js"></script> 
37  </body>
38</html>

stylesheet3.css

css
1* {
2    margin: 0;
3    padding: 0;
4  }
5
6.box {
7    position: relative; 
8   
9    height     : 800px;
10    margin     : 0;
11    overflow   : hidden;
12    opacity: 0.7;
13
14  }
15  
16  /* --- 背景の指定 ------------------------------------------- */
17  .box .bgImg {
18    position   : absolute;
19    top        : 0;
20    left       : 0;
21    bottom     : 0;
22    right      : 0;
23    opacity    : 0;
24    animation  : bgAnime 20s infinite;   /* 4画像 × 各5s = 20s */
25  }
26  
27  /* --- 段差で背景画像のアニメーションを実行 ----------------- */
28  .box .src1 {
29    background-image : url(http://rumi8532.cocotte.jp/2409797.jpg);   /* 背景の画像を指定 */
30  }
31  .box .src2 {
32    background-image : url(http://rumi8532.cocotte.jp/2507282.jpg);   /* 背景の画像を指定 */
33    animation-delay  : 5s;
34  }
35  .box .src3 {
36    background-image : url(http://rumi8532.cocotte.jp/2497988.jpg);   /* 背景の画像を指定 */
37    animation-delay  : 10s;
38  }
39  .box .src4 {
40    background-image : url(http://rumi8532.cocotte.jp/2516134.jpg);   /* 背景の画像を指定 */
41    animation-delay  : 15s;
42  }
43  
44  @keyframes bgAnime {
45     0% { opacity: 0; }
46     5% { opacity: 1; }
47    25% { opacity: 1; }
48    30% { opacity: 0; }
49   100% { opacity: 0; }
50  }
51  
52  /* --- 前面の文字定義（サンプルのため変更してください） ----- */
53  .box .boxString{
54    font-size: 60px;
55    opacity: 1.0;
56    border-bottom: 2px solid #a9a9a9;
57
58    margin-top: 370px;
59    margin-left: 480px;
60 
61    position   : absolute;
62    display    : inline-block;
63   
64  }
65
66
67
68  .menu{
69    float: left;
70    background-color: #dcdcdc;
71    height: 100px;
72    width: 100%;
73}
74
75li{
76    list-style: none;
77    float: left;
78    font-size: 30px;
79    color: white;
80    margin-right: 20px;
81    margin-top: 30px;
82    margin-left: 30px;
83    padding: 3px;
84}
85
86a{
87  color: white;
88  text-decoration: none;
89}
90
91@media (max-width: 1000px) {
92
93  .box .src1 {
94    background-image : url(http://rumi8532.cocotte.jp/phone.jpg);   /* 背景の画像を指定 */
95  }
96
97  .box .boxString{
98    font-size: 60px;
99    opacity: 1.0;
100    border-bottom: 2px solid #a9a9a9;
101
102    margin-top: 400px;
103    margin-left: 60px;
104 
105    position   : absolute;
106    display    : inline-block;
107  }
108
109}

前回も質問させていただき、viewportは書きました。
何回もすみません、わかる方ご教授お願いします。

hope_mucci

2021/06/06 01:48

少なくとも質問文のコードをそのまま表示させた場合、きちんとレスポンシブで表示されています。 iPhone11ではないですが、手持ちのiPhoneXでは期待通り表示できました。コードやスクリーンショットからデプロイしているサーバのURLが類推できたのでそちらのページの内容を確認しましたが、必要なmetaタグ等が存在しません。サーバのhtmlとローカルのhtmlが違うだけではないでしょうか？