響應式設計不適用於 Iphone

Question

首先，這是 chrome 開發工具向我展示的方式；

它看起來很正常且反應靈敏，但我試圖將其發送給我的朋友，他們給我發了這個；

如您所見，它與我的手機或 chrome 開發工具完全不同。 只有在 Iphone 中它看起來像這樣。 我在 index.html 中也有此代碼；

 <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />

我還讓我的朋友下載了 Chrome，但結果是一樣的。

Answer 1

根據設備的不同，某些東西的大小可能會有所不同。 你的朋友和你一樣有什么 iPhone？ 這很重要，因為 Chrome 使用這些比率和大小來表示它的外觀。 從你電腦上的圖片看，你在 iPhone 6,7 和 8 plus 上進行測試，但是根據手機屏幕截圖上的時間、電池等圖標的位置，看起來你的朋友使用的是 Iphone 10 或更高版本.

您可以使用 CSS media queries ，以便更好地控制事物的顯示方式。 不是答案，只是一個建議，但我希望這會有所幫助:)