CSS3媒体查询不适用于iPod/iPhone上的Safari

我正在开发一个响应式设计网站。该网站将针对iPhone和iPod进行优化（两者的宽度均为640px）。CSS3媒体查询不适用于iPod/iPhone上的Safari

我使用下面的CSS3媒体查询：

@media screen and (max-width: 640px) { 
     .display-none-mobile{ 
      display: none; 
     } 
    } 
    @media screen and (min-width: 641px) { 
     .display-none-desktop{ 
      display: none; 
     } 
    }

上面的代码，当我缩小浏览器宽度640像素，工作在我的桌面浏览器大。但是，当我尝试使用Safari浏览器在iPod上测试网站时，该代码不起作用。

我改变了CSS3媒体查询

@media screen and (max-device-width: 640px) { 
     .display-none-mobile{ 
      display: none; 
     } 
    } 
    @media screen and (min-device-width: 641px) { 
     .display-none-desktop{ 
      display: none; 
     } 
    }

现在，响应式设计工作了Safari浏览器的iPod，但它与所有其他桌面浏览器的布局搞砸了。这些css3媒体查询完全被我的桌面上的oChrome，IE，FF忽略（宽640px）。

所以现在我已经找到了与跨浏览器兼容css3媒体查询有关的东西，但无法找到关于此的更多信息。什么是我可以更新我的代码，使css3媒体查询适用于所有浏览器（或至少主要的）的方式。我瞄准ATLEAST

IE的Windows
Safari浏览器的Windows
Chrome窗口
Firefox窗口
Safari浏览器的iPod
铬的iPod

来源

2013-05-08 CodeMonkey

查看http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html了解有关元标记和媒体查询的一些信息。我想可能是你遇到的问题。设备宽度和内容宽度不一样，因此媒体查询实际上按预期工作，而不是根据您的需要。 – aaronburrows 2013-05-08 19:06:45

如果不加在您的HTML上使用<meta>标记后，设备将忽略您的媒体查询ies

<!DOCTYPE html> 
<html lang="en-us"> 
    <head> 
     <meta name="viewport" content="width=device-width"> 
    </head> 
    <body> 
    </body> 
</html>

来源

2013-05-09 03:31:35

谢谢。但事情是我仍然必须修复很多像填充，宽度，边距等UI的东西。 – CodeMonkey 2013-05-09 18:50:09

@CodeMonkey但媒体查询工作正常吗？所以你应该关闭这个问题。我希望你可以解决这个问题祝你好运兄弟 – 2013-05-09 18:55:53

是的，我必须做一些草率的编码。一些硬编码。那种我根本不喜欢的东西。在我的最后期限，所以必须推动。感谢您的2美分 – CodeMonkey 2013-05-09 19:10:03

CSS3媒体查询不适用于iPod/iPhone上的Safari

回答

相关问题