爲什麼我的CSS3媒體查詢不適用於移動設備？

113

在styles.css中，我使用的媒體查詢，它們都使用的變化：爲什麼我的CSS3媒體查詢不適用於移動設備？

/*--[ Normal CSS styles ]----------------------------------*/ 

@media only screen and (max-width: 767px) { 

    /*--[ Mobile styles go here]---------------------------*/ 
}

的站點調整到我想在一個普通的瀏覽器（Safari瀏覽器，火狐）當我縮小布局窗口，但是，手機上根本沒有顯示移動設備佈局。相反，我只看到默認的CSS。

任何人都可以指向正確的方向嗎？

來源

2011-10-22 redconservatory

是什麼手機？媒體查詢是CSS中的一項新功能，並非所有的手機瀏覽器都支持它... – Sparky

iPhone 4和我也在測試320 x 480分辨率的Android手機（2.2 Froyo）。 – redconservatory

其實我切換到iPhone 4上的以下媒體查詢和它的作品（但我必須改變我的CSS以適應更高的分辨率）@media唯一屏幕和（-webkit-min-device-pixel-ratio：2）{} – redconservatory

300

所有這三個都是有用的技巧，但它看起來像我需要添加meta標籤：

<meta name="viewport" content="width=device-width" />

現在它似乎在Android（2.2）和iPhone都可以正常工作...

來源

2011-10-22 15:58:55 redconservatory

+36

其實 – EnchanterIO

我使用幾種方法。在我使用的相同樣式表中：@media（max-width：450px），或者單獨確保正確地在標題中包含鏈接。我看了一下你的fixmeup，並且你有一個混亂的css鏈接數組。它的行爲就像你說的HTC慾望S.

來源

2011-10-22 12:27:34 Benteh

再次看看CSS，謝謝...很高興知道它在某些方面有效。 – redconservatory

我懷疑關鍵字only可能是這裏的問題。我有使用媒體查詢像這樣沒有任何問題：

@media screen and (max-width: 480px) { }

來源

2011-10-22 12:30:12

我在一個新聞網站使用引導，但它不能在IE8上工作，我用css3-mediaqueries.js JavaScript，但仍然無法正常工作。如果你希望你的媒體查詢與此javascript文件工作在CSS

在此處添加的畫面投放到媒體查詢行是一個示例：

<meta name="viewport" content="width=device-width" /> 


<style> 
    @media screen and (max-width:900px) {} 
    @media screen and (min-width:900px) and (max-width:1200px) {} 
    @media screen and (min-width:1200px) {} 
</style> 

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 
<script type="text/javascript" src="css3-mediaqueries.js"></script>

CSS鏈接線那麼簡單，以上線。

來源

2013-08-31 10:58:13 user1290329

@media all and (max-width:320px)and(min-width:0px) { 
    #container { 
    width: 100%; 
    } 
    sty { 
    height: 50%; 
    width: 100%; 
    text-align: center; 
    margin: 0; 
    } 
} 

.username { 
    margin-bottom: 20px; 
    margin-top: 10px; 
}

來源

2015-03-04 10:13:32

請給你的代碼添加一些解釋，說明它是如何解決這個問題的 - 這將在未來幫助其他人，你的答案更有可能得到提高 –

雖然這段代碼可以解決這個問題，但[包括解釋]（http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）確實有幫助以提高您的帖子的質量。請記住，您將來會爲讀者回答問題，而這些人可能不知道您的代碼建議的原因。 – Ferrybig

今天我有類似的情況。媒體查詢無效。過了一段時間，我發現'and'後的空間不見了。正確的媒體查詢應該是這樣的：

@media screen and (max-width: 1024px) {}

來源

2015-04-07 10:48:42 dklog79

這就是爲什麼我們有CSS驗證器。這與這個特定問題無關，因爲OP已經指出媒體查詢實際上在非移動瀏覽器中工作。 – cimmanon

仍然覺得這有幫助，因爲它是我的情況下的問題 –

不要忘了有標準的CSS聲明以上媒體查詢或查詢將不能工作。

.edcar_letter{ 
    font-size:180px; 
} 

@media screen and (max-width: 350px) { 
    .edcar_letter{ 
     font-size:120px; 
    } 
}

來源

2016-05-03 16:13:32 The4thIceman

事實上，你的CSS樣式從標準尺寸到最小尺寸按照遞減順序堆疊。規則仍然適用如果您的媒體查詢全部在同一個文件中。 –

適用於我，即使我沒有針對所述課程的標準css聲明。 – Mason

確保你的CSS註釋所有使用這個標記/* ... */ - which is the correct comment markup for css according to MDN

我抄襲自舉4個媒體查詢直接從他們的文檔和每個查詢都標有相同的JavaScript風格的註釋標記//！

此外，IntelliJ文本編輯器允許我在LESS文件中註釋掉特定的css行，但會自動使用//。這不是免費軟件，所以我認爲它是正確的。有一個用於糾正這種行爲的首選項菜單。

另外，驗證你的css與一個值得信賴的在線驗證。Here's one by W3

來源

2017-01-24 22:00:26

OP已經使用正確的註釋標記*，如後*所示。 – TylerH

對我而言，我表示的是max-height而不是max-width。

如果那是你，去改變它！

@media screen and (max-width: 350px) { // Not max-height 
     .letter{ 
      font-size:20px; 
     } 
    }

來源

2017-12-12 14:55:46

爲什麼我的CSS3媒體查詢不適用於移動設備？

回答

相關問題