iOS Safariブラウザでテーマコンポーネントのモバイルバージョンが読み込まれないのはなぜですか？

サポート
1

テーマコンポーネントがあり、デスクトップとモバイルの両方でCSSとHeadが定義されています。

モバイルでは、スペースのために形状が小さく定義されています。

これはiPhoneのChromeやFirefoxではうまく機能しますが、Safariではデスクトップバージョンが読み込まれます。
Safariブラウザはサイトのデスクトップバージョンを読み込んでいません。
誰かこの問題を見ましたか？ iOSモバイルSafariはモバイルブラウザとして報告しないのですか？それとも…

ありがとうございます

2

まず、URLの末尾に以下を追加してモバイルビューに強制的に切り替えることで確認してください。

https://example.com?mobile_view=1

問題は、あなたが考えているものとは違うかもしれません…

使用しているSafariのバージョンも記載すべきです。

「いいね！」 1
3

@merefield 様、ありがとうございます。

  • Safari (iOS 17.1.2) でコンポーネントを読み込むと、デスクトップ用に定義された大きな形状が表示されます。
    iOS を最新の 17.2.1 にアップデートしましたが、同じです。
  • 同じデバイスで Chrome または Firefox を使用して開くと、モバイル用に定義された小さな形状が表示されます。
  • デスクトップブラウザで https://example.com?mobile_view=1 を表示すると、モバイル用に定義された小さな形状が表示されます。

Safari ブラウザがデスクトップコンテンツを読み込んでいるのではないかと疑っていましたが、そうではありません。例えば、デスクトップバージョンではなく、モバイルレイアウトを読み込んでいるようです。
以前は気づきませんでしたが、おそらく iPhone ではほとんど Chrome を使用していたためでしょう。

再現するために、問題を説明する簡略化されたバージョンを作成しました。

  • 以下のサンプルコードは、基本的にデスクトップブラウザでは大きな赤い円、モバイルブラウザでは小さな円を表示します。
  • このコンポーネントをインストールすると、次のことがわかります。
    iPhone の Chrome/Firefox では小さな円が表示されます。これは期待どおりです。
    しかし、Safari ではデスクトップブラウザ用に定義されている大きな円が表示されます。これは期待どおりではありません。
  • テーマコンポーネントを作成し、以下のコンテンツを追加してください。
    image
    image999×567 55.6 KB

Desktop

CSS

.deng-box1 {
    position: fixed;
    top: -30px;
    left: 180px;
    z-index: 1999;
}
 
.deng-box1 .deng {
    position: relative;
    width: 120px;      // 大きいサイズ!!!
    height: 90px;       // 大きいサイズ!!!
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}

Head


<div class="deng-box1">
    <div class="deng">
    </div>
</div>

Mobile

CSS


.deng-box-mobile {
    position: fixed;
    top: 180px;
    left: -40px;
    z-index: 1999;
}

.deng-box-mobile .deng {
    position: relative;
    width: 60px;   // 小さいサイズ!!!!!!
    height: 45px;   // 小さいサイズ!!!!!
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}

Head


<div class="deng-box-mobile">
    <div class="deng">
    </div>
</div>
「いいね！」 1
4

GitHubでパッケージ化することを提案します。これにより、人々が検証しやすくなります…

5

サファリモバイルブラウザにこのクエリ文字列を入力するとどうなりますか？

6

?mobile_view=1 のようにすると、iPhoneのSafariブラウザでモバイルバージョンが読み込まれます。
ふむ…

試したりデバッグしたりしやすいようにリポジトリに入れます… ご協力ありがとうございます！

7

ああ、以前はそうではなかったのですか？それは興味深いですね！

17.3 (PB) では、(そのクエリ文字列を必要とせずに) iPhone 11 で TC のモバイルバージョンが表示されています。