validation - 有效使用 -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-min-device-pixel-ratio: 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;
}

对 W3C 验证器不应该看到的每个内容使用这样的 PHP 解决方法:

<?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>