-webkit-min-device-width-CSS媒體查詢的有效使用

Question

當使用媒體查詢鏈接到樣式表以定位視網膜顯示時，我得到一個W3驗證錯誤。下面是代碼：

<link rel='stylesheet' type='text/css' href='/css/styles-retina.css' media='only screen and (-webkit-min-device-pixel-ratio: 2)'/> 

W3C的錯誤報告：

「壞值僅屏幕和（-webkit分鐘設備像素比：2），用於在元件鏈路屬性的媒體：預期在媒體功能部分開始時的一封信，但看到了 - 取而代之。「

我搜索了這個，我開始認爲沒有一個「有效」的解決方案，要麼忽略驗證錯誤或完全刪除這個查詢。我明白驗證代碼並不總是有用，但在這種情況下有沒有辦法？

Answer 1

-webkit過濾器是對於W3C無效。此外，media=''的值不是W3C標準。你可以看到所有允許媒體類型在這裏：http://www.w3schools.com/CSS/css_mediatypes.asp

有沒有真正的解決方案驗證您的代碼，但你可以做一個變通方法，但是這並沒有真正驗證碼：

PHP解決方法：

function w3c(){ 
if((stristr($_SERVER["HTTP_USER_AGENT"],'w3c') === FALSE)) 
return true; 
} 

使用PHP的解決方法是這樣的，不應該成爲W3C驗證可見每一個內容：

<?php if(w3c()){ ?> 
    <link rel='stylesheet' type='text/css' href='/css/styles-retina.css' media='only screen and (-webkit-min-device-pixel-ratio: 2)'/> 
<?php } ?> 

的Javascript解決方法：

的Javascript也是不可見的W3C驗證，所以你也可以使用此解決方案（只是要記住，JavaScript可以被禁用）：

<script type="text/javascript"><!-- 
document.write('<link rel='stylesheet' type='text/css' href='/css/styles-retina.css' media='only screen and (-webkit-min-device-pixel-ratio: 2)'/>'); 
//--></script>