使用媒体查询链接到样式表以目标视网膜显示时,出现 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) 的值不正确:在媒体功能部分的开头应该有一个字母,但看到了 - 而不是。”
我已经搜索过这个并且开始认为没有一个“有效”的解决方案,要么忽略验证错误,要么完全删除这个查询。我知道验证代码并不总是有用,但是在这种情况下有什么方法吗?
最佳答案
-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>
关于validation - 有效使用 -webkit-min-device-width - CSS 媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8798280/