响应式设计不适用于 Iphone答案

【问题标题】：Responsive design doesn't work on Iphones响应式设计不适用于 Iphone
【发布时间】：2021-06-07 17:20:21
【问题描述】：

首先，这是 chrome 开发工具向我展示的方式；

它看起来很正常且反应灵敏，但我尝试将其发送给我的朋友，他们给我发了这个；

如您所见，它与我的手机或 chrome 开发工具中的不同。只有在 Iphone 中它看起来像这样。我在 index.html 中也有这段代码；

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

我也让我的朋友下载了 Chrome，但结果是一样的。

【问题讨论】：

您需要更新您的问题并包含更多代码（HTML 和 CSS）。否则不可能知道:)

标签： html css reactjs responsive-design

【解决方案1】：

根据设备的不同，某些东西的大小可能会有所不同。你的朋友和你一样有什么 iPhone？这很重要，因为 Chrome 使用这些比率和大小来表示它的外观。从你电脑上的图片看，你在 iPhone 6,7 和 8 plus 上进行测试，但是根据手机屏幕截图上的时间、电池等图标的位置，看起来你的朋友使用的是 Iphone 10 或更高版本.

您可以使用 CSS media queries 来更好地控制事物的显示方式。 不是一个答案，只是一个建议，但我希望这会有所帮助:)

【讨论】：

好吧，我已经使用了很多媒体查询，除了 iphone 之外的每个人都很好。