使用Picturefill v1.2时考虑滚动条宽度

时间:2014-12-05 11:13:59

标签: javascript jquery media-queries picturefill

我使用Picturefill 1.2并且由于存在滚动条而在不同平台/浏览器上调整大小时会出现问题。

我有以下代码:

<span data-picture data-alt="Image">
<span data-src="images/banner-01-sml.jpg"></span>
<span data-src="images/banner-01-med.jpg" data-media="(min-width: 768px)"></span>
<span data-src="images/banner-01-lrg.jpg" data-media="(min-width: 1024px)"></span>
<span data-src="images/banner-01-wide.jpg" data-media="(min-width: 1200px)"></span>

<!--[if (lt IE 9) & (!IEMobile)]>
    <span data-src="images/banner-01-lrg.jpg"></span>
<![endif]-->

<!-- Fallback content for non-JS browsers. -->
<noscript>
    <img alt="Image" src="images/banner-01-sml.jpg">
</noscript>

以上在Mac上正确触发,因为它没有显示滚动条,但在Windows上使用滚动条查看时它没有正确触发。我使用带有17px滚动条的Chrome,所以当我将值更改为785px,1041px和1217px时,它会在Windows上正确激活但不会在Mac上激活。

有没有人有任何建议让这项工作?或者有人知道版本2是否适合这个?

非常感谢任何帮助。

谢谢, 杰斯

0 个答案:

没有答案