我遇到了媒体查询没有加载 CSS 或正确显示样式的问题。
我所做的是为我的 iPhone 创建一个 style480.css,为正常创建一个 style.css。
我加载了
<meta name="viewport" content="width=device-width, initial-scale=1"/>
在我的网站上,以便它可以工作。
我将主站点上的 css 设置为读取样式 480,这样我就可以为 iphone 进行样式化。在我的 iphone 上一切看起来都很棒,当然这只是我桌面上的一个无聊的列表。
完成 style480 后,我将 css 复制/粘贴到
@media only screen and (max-width: 480px) {
{
body {width:100%;}
}
以我的风格 CSS。
听起来很标准。
但是它在我的 iPhone 上的格式不正确
顶部导航菜单(我使用 html 5 <nav>
)被推到左边,一些列表不应该被浮动。
就像 iphone 正在混合来自媒体查询内外的元素。
我什至尝试将媒体查询放在顶部,放在底部并加载
-webkit-min-device-pixel-ratio : 1.
同样的事情,就像它正在混合css。
我什至尝试在 HTML 上单独加载 css 文件......完全相同。
我可以让我的 iphone css 正确加载的唯一方法是将其设置为页面的主 css。当我加载 2 组 css 时,它无法在 iphone 上运行(但它可以在我的笔记本电脑上运行)
如果我能找到一种从 iphone 查看 css 的方法,我也许能够弄清楚它在做什么,但在他们之前,我不知道为什么它没有正确加载 CSS