chrome 26.0.XXX版本下media query流媒体查询有问题的bug
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了chrome 26.0.XXX版本下media query流媒体查询有问题的bug相关的知识，希望对你有一定的参考价值。
这段代码什么意思：
@media only screen and (max-width: 1360px)
当用户的界面小于等于1360px的时候， 会加载该流媒体样式（此时的界面是包含滚动条的）；
在Chrome/26.0.1384.0 Safari/537.26或者更低版本中会有一个神奇的bug；
出现bug的必须条件为，1：界面有引用一个css文件，不管这个css文件是否存在； 2：流媒体查询的宽度 必须介于 --》》浏览器包含滚动条的可视区域 和 浏览器未包含滚动条的宽度 之间，
滚动条， 源码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/xx.css"/>
<title>云平台首页</title>
</head>
<style>
.bodyer
background:#FBA733;
border:1px solid #eee;
width:400px;
height:400px;
/*@media all and (max-width:1300px) */
@media only screen and (max-width: 1360px)
.bodyer
width:200px;
height:200px;
</style>
<body>
<style>
</style>
<div class="bodyer">
</div>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
</body>
</html>
View Code
正常显示是要这样的：
有时候会变成这样：
新版本的chrome是没有问题的， 至于哪些chrome有问题， 我可没测过， 要解决这个问题， 把垂直滚动条去掉就好了， 或者把滚动条出现在DIV内部， 不要出现在BODY元素上， 流媒体查询就会生效了；
天道酬勤
以上是关于chrome 26.0.XXX版本下media query流媒体查询有问题的bug的主要内容，如果未能解决你的问题，请参考以下文章
为啥 Google Chrome 会影响我的 CSS @media-queries？
@media 查询在移动设备中不起作用。在 Chrome 中运行良好
Chrome 的纺车不会因 <link media="..."> 而停止旋转
媒体投影需要 Android Pie 和 Q 中类型为 ServiceInfo.FOREGROUND_SERVICE TYPE_MEDIA_PROJECTION 的前台服务