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

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

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

---

在我的媒体查询中区分with和device with，但似乎什么都不起作用。有什么建议吗？

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

谢谢您的帮助。我是网页设计新手（更多的是编码），所以我还有很多东西要学。我将尝试在CSS中使用更多百分比并合并文件。让我知道，哪些设备不适用于该网站？好吧，打开你的网站，然后慢慢缩小浏览器窗口，你应该自己看看。具体来说，在第一次媒体查询开始之前，您的社交按钮和菜单都会出现问题。您不应该为特定的设备编写代码，因为它们太多了。最好确保您的布局在每个屏幕大小（从1280像素到320px）下都能正确呈现。