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

Question

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

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

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

Answer 1

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