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

2019年8月3日 188次阅读

使用媒体查询链接到样式表以定位视网膜显示时,我收到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解决方法：

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>
点赞