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

W3C的-webkit过滤器无效。 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解决方法：

W3C验证器也看不到Javascript，因此您也可以使用此解决方法（请记住，可以禁用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>

有效使用-webkit-min-device-width - CSS媒体查询

1 个答案: