移动 CSS 仅在设备旋转后加载

Question

我的网站redkrypt.com 在我的笔记本电脑上运行良好，但我的 iPhone 4S 仅在旋转一次后才能加载 CSS。在我这样做之后，它可以垂直和水平地工作。我已经尝试了我所知道的一切，包括添加

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

并在我的媒体查询中区分 with 和 device with，但似乎没有任何效果。有什么建议吗？

Answer 1

认为这是因为您在链接标签中使用媒体查询，而不是在 css 本身中。然后浏览器根据查询和当前屏幕大小加载文件，而不是一次加载所有文件（在您的情况下这也不是很有效！）。因此，对于每个定义的大小，您现在都有一个单独的 css 文件，它也使用冗余样式。认为您最好使用一个 CSS 文件，并在其中设置媒体查询。这种方式维护应该更容易，你也将避免你提到的问题。另外，你为什么要使用这么多屏幕尺寸？通常您不需要添加超过 3-4 个大小，但您已经有 10 个文件。还要考虑在你的布局中使用百分比而不是固定的像素值，你的 CSS 无论如何都不是真正响应的，即在许多尺寸下仍然失败。您也可以通过缩小窗口在桌面浏览器中测试您的响应式设计。确保内容不会以任何大小被截断。