响应式设计 - 网站在 iPhone 和较小的浏览器上显示不同

Posted 2023-03-06

【中文标题】响应式设计 - 网站在 iPhone 和较小的浏览器上显示不同

【英文标题】：Responsive Design - Site Showing Differently on iPhone versus Smaller Browser

【发布时间】：2013-05-24 17:34:24

【问题描述】：

我向my site here 添加了一些媒体查询，当我将浏览器的窗口最小化到最小尺寸时，这些查询可以正确显示。虽然不幸的是，当我导航到其中一个内部页面时，原始设计显示在 iPhone 上。在我的浏览器中进行测试时，无论我在哪个页面上，该网站都能正常工作。

注意：要进行测试，请将您的浏览器最小化到显示他们想要的“移动网站”的最小宽度。

我完全被难住了。有人可以指出为什么 iPhone 似乎在加载旧 CSS 而浏览器本身正在加载当前 CSS 的方向吗？

谢谢！

【问题讨论】：

在您的手机上看起来与预期有何不同？对我来说，瘦桌面版看起来和我的 iPhone 一样。也许是缓存问题？

它在主页上运行良好，但会加载内部页面的“桌面版本”。我什至在网上尝试过模拟器，它似乎也是如此。

内页看不到viewport标签，在首页就看到了。

【参考方案1】：

谁能指出我为什么 iPhone 似乎在加载旧的 CSS 而浏览器本身正在加载当前的 CSS？

您可能会回答自己的问题。这显然是一个缓存问题，因为我在移动浏览器和桌面浏览器上都看到了同一个网站。

尝试清除移动浏览器的缓存。如果您使用 Safari，请转到 设置 > Safari > 清除 cookie 和数据。如果您使用 Chrome 或任何其他第三方浏览器，您通常可以在应用内设置页面下清除本地文件。

【参考方案2】：

确保包含这样的视口元标记：

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

【讨论】：

我认为这可能是问题，但我已经添加了这个。 - 非常感谢您提供帮助！