我遇到媒体查询无法加载 CSS 或无法正确显示样式的问题。
我所做的是为我的 iPhone 创建一个 style480.css,为 normal 创建一个 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>
)被推到左边,一些列表在不应该的时候 float 。
这就像 iphone 混合了媒体查询内外的元素。
我什至试过将媒体查询放在顶部,将其放在底部并加载
-webkit-min-device-pixel-ratio : 1.
同样的事情,就像是在混合css。
我什至尝试在 HTML 上单独加载 css 文件……完全一样。
让我的 iphone css 正确加载的唯一方法是将它设置为页面的主 css。当我加载 2 套 css 时,它在 iphone 上不工作(但它在我的笔记本电脑上工作)
如果我能找到一种从 iphone 查看 css 的方法,我也许能够弄清楚它在做什么,但直到他们我才知道为什么它没有正确加载 CSS
最佳答案
It is like the iphone is mixing elements from in and outside the media query.
嗯,是的,这就是它的工作原理。将使用媒体查询之外的内容,除非媒体查询内部直接覆盖它。您不应该将所有代码都粘贴到媒体查询中,而只是您要针对该分辨率调整的内容。
媒体查询不会取代您的主要 CSS 文件,而是对其进行补充。
关于iphone - CSS 媒体查询无法在 iPhone 4 上正确加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10156877/