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

回答

相關問題