iPhone忽略了CSS媒體查詢。存在視口標記。在桌面工作

編輯：這是我的一個總菜鳥錯誤。我正在編輯一個不同的文件集到我正在測試的那個。對所有回答我的人表示誠摯的歉意。我已經提出了所有答案，因爲我至少從你們所有人那裏瞭解了更多關於媒體的問題，但沒有人提供了答案。建議請問現在怎麼辦這張票？iPhone忽略了CSS媒體查詢。存在視口標記。在桌面工作

這是網站上的一個繁忙的話題，但我還沒有看到解決這個問題的方法。

viewport標記存在。我使用的是：

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

當我調整在Chrome瀏覽器窗口，它工作得很好，我可以看到它捕捉到，因爲他們達到了一個新的斷點，但iPhone Safari瀏覽器會顯示該網站的左上角只，沒有跡象表明任何疑問。

我使用iPhone的肖像CSS媒體查詢是：

@media (max-width: 321px) { }

我使用的是引導少，所以我的媒體查詢是在樣式的結束。

對不起，我無法在此共享代碼。這是一個奇怪的 - 我希望有人能夠看到我是否可能會失蹤。

編輯

這裏是它的工作在我的iPhone一個非常簡單的例子。我可以從縱向旋轉以景觀和背景顏色將改變 - 所以有什麼錯我使用的媒體查詢：

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
    <style type="text/css"> 

     body 
     { 
      background: blue; 
     } 

     @media (max-width: 321px) 
     { 
      body 
      { 
       background: red; 
      } 
     } 
    </style> 
</head> 
<body> 
    Here is my content... 
</body>

來源

2013-04-30 BB Tony

'max-width' vs'max-device-width'？ – 2013-04-30 14:07:43

謝謝。不，那沒用。 – 2013-04-30 15:24:23

如果這個最小的例子有效，但完整的例子沒有，那麼你可能有一個破碎的CSS或多個媒體 - 查詢互相覆蓋 – 2013-05-02 07:25:57

我以前用這個爲我的網站和它的工作作爲iPhone特定媒體的查詢，我

@media only screen 
    and (max-device-width: 480px) 
    and (orientation:landscape) { 
    /* iPhone landscape */ 
} 

@media only screen 
    and (max-device-width: 480px) 
    and (orientation:portrait) { 
    /* iPhone portrait */ 
}

解答其他問題like this似乎表明，480px爲max-device-width是你應該去什麼在你的媒體查詢。

來源

2013-04-30 15:37:16

謝謝。這看起來不錯。我越看到這一點，就越覺得我觸發了一些不尋常的錯誤。 – 2013-04-30 15:45:45

@BBTony（如果這是你的第一個問題）如果答案是有用的，考慮提高它。如果它解決了您的問題，請考慮將其標記爲「已接受」。但不要因爲我或其他人告訴你而這樣做。如果您的問題仍未得到解答，請考慮進行更詳細的編輯以幫助我們瞭解問題。 – 2013-05-02 07:23:59

感謝您的建議。還在學習繩索。我會照辦的。謝謝。仍在研究它。當我找到解決方案時，我會自己發佈答案。 – 2013-05-03 07:54:58

編輯什麼解決這對我來說是一個雙引號（「或」 -operated）媒體查詢，對於無論是最大設備寬度或最大寬度。這就像DavidRönnqvist的第一個建議，但它只是把max-width, max-device-width都放在媒體查詢中，這對我來說很有用。

@media screen and (max-device-width:640px), screen and (max-width:640px) { 
    /* styles here */ 
}

BBTony，我希望這對你有用。

我保留下面的內容，因爲它比我在其他地方找到的更全面。我不喜歡我的第一個解決方案（低於線路），所以我重新研究了第一千次 - 感謝this post，它給了我上面的解決方案，沒有可笑的重要性。

編輯：這也是工作，但它是非常不雅：把「重要！」在媒體查詢條件CSS的每一行。

我不願意提出，作爲回答，但經過躁狂者研究這3天后，這是我的第一件事情。

問題的完整描述：我的症狀與BBTony相似。我有視口標籤（我推薦它在樣式表上方）。

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

我的媒體查詢，意在捕捉任何短小的設備，正被運行iOS 5.1的iPhone 3GS忽略，但相同的媒體查詢是被正確拾起一個iPhone 4S運行iOS 6

@media only screen and (max-device-width:640px) { 
    /* many styles here */ 
}

奇怪的是，雖然媒體查詢中的大多數聲明都被較舊的iPhone忽略，但其中一些被所尊重。不過，如預期的那樣，較新的iPhone 4在媒體查詢中尊重了所有的CSS。在Safari桌面上，媒體查詢完美運行，在兩個斷點處捕捉（有2個）。

我在閱讀here之後，通過幾種不同的短文將我的CSS弄了一遍，發現CSS錯誤會導致移動瀏覽器忽略媒體查詢。在確定我的CSS符合要求後，我只需在媒體查詢之後的每一行CSS後面加上！重要聲明 - 例如80-100！important。

Presto。

我不能告訴你它讓我覺得這樣做有多瘋狂，而且我很好奇爲什麼舊iphone只會尊重條件！

來源

2013-05-14 06:13:53 nimmolo

感謝您關注此事。我暫時不在這個項目中，但會回到它，所以我會記住你的解決方案。 – 2013-05-15 07:14:33

上面編輯過的評論。一旦我正確消化了你的答案。道歉... – 2013-05-15 07:18:11

有一個類似的問題，其中一個css規則沒有影響，當iphone被翻轉到水平狀態，只有當頁面刷新它激活css規則。這爲我修好了！ – 2016-06-20 16:40:20

iPhone忽略了CSS媒體查詢。存在視口標記。在桌面工作

回答

相關問題