如果指定不受支持的媒體查詢屬性，會發生什麼情況？

您有問題，如this和this，如果瀏覽器不支持媒體查詢，整個事情都會被忽略。如果指定不受支持的媒體查詢屬性，會發生什麼情況？

我需要知道的是如果瀏覽器支持媒體查詢但不支持特定屬性會發生什麼情況。例如，以下內容將針對縱向方向上寬度不超過750像素的任何設備。現在，假設我在不支持「orientation」屬性的設備上運行此操作。方向屬性會應用於小於750像素的任何設備，否則整個事物將被忽略？

@media screen and (min-device-width:750px) and (orientation: portrait){ 

/*some css rule*/ 

}

來源

2013-11-21 caiocpricci2

你自己測試過了嗎？ –

我真的很想，但我沒有訪問不支持方向查詢的設備（我只知道iphones <4.12），我不知道如何測試它。 – caiocpricci2

然後使用您知道設備不支持的規則進行測試（即您自己製作的關鍵字）。 –

從你link：

如果瀏覽器不支持媒體查詢則沒有發生這忽略的條件裏面的一切。

對於您的問題，這意味着，如果瀏覽器不知道一個媒體查詢（你與and接法）查詢被忽略的所有媒體。

@media screen and (test: "test"){ 
    body { 
     background-color: green; 
    } 
}

提琴手：您可以通過「創造」自己的媒體這樣的查詢測試該http://jsfiddle.net/JVqqd/ 正如你可以看到查詢被忽略，因爲測試是未知的，但它可能是一個未來的媒體查詢。

@Mr利斯特根據Can I use沒有問題regardin媒體查詢是已知的，所以都遵循這一理念

來源

2013-11-21 14:46:36 Stefan

我懷疑，該設備將對待媒體的功能，就好像它是未知的，很像是如何的瀏覽器不支持某個屬性會忽略任何使用它的聲明（例如Firefox仍然拒絕識別沒有前綴的box-sizing）。

本質上講，這意味着the whole thing would be ignored：

未知的媒體功能。當指定媒體特徵之一未知時，用戶代理將表示媒體查詢爲「not all」。
<link rel="stylesheet" media="screen and (max-weight: 3kg) and (color), (color)" href="example.css" /> 
在這個例子中，第一媒體的查詢將被表示爲「not all」和評估爲假並且如果第一沒有被指定的所述第二媒體的查詢求值，有效。

當然，你的情況，這不是一個虛構的媒體功能類似weight但在規範中定義一個，orientation。

來源

2013-11-21 15:01:49 BoltClock

我知道，例如舊的iPhone（<4）不支持它。我們現在已經過去了，這很好，但我有點擔心，也許可能會有一些老版本的android會忽略查詢。 – caiocpricci2

@ caiocpricci2：有趣的。有許多來源似乎證實（[1]（http://www.quirksmode.org/blog/archives/2010/04/the_orientation.html）和[2]（http：//www.1stwebdesigner .COM/CSS /如何使用的，CSS3方位用媒體查詢））。 – BoltClock

根據caniuse的iOS 3部分支持查詢，這是有道理的，但android自2.1以來已全面支持。我很高興不支持iOS 3和androids <2.3.3，所以這對我來說已經不是問題了！ – caiocpricci2

如果指定不受支持的媒體查詢屬性，會發生什麼情況？

回答

相關問題