我正在使用以下两段CSS和JS代码：
@media (max-width: 720px) {
// a code to make arrows in a carousel disappear
}
if(jQuery(window).width() <= 720){
// a code to make arrows in the carousel stop working
}
它们的问题是后者在width = 738px而不是720px上执行.我怀疑这是因为浏览器的垂直滚动条在Chrome中的宽度等于18px.
有没有办法统一这个？我希望这些操作在所有浏览器中同时发生,而不管滚动条的宽度如何.
测试(当浏览器是@ 720px并且CSS已经执行时)：
jQuery(document).innerWidth() = 703
jQuery(window).innerWidth() = 703
jQuery(document).width() = 703
jQuery(window).width() = 703
jQuery('body').width() = 703
jQuery('html').width() = 703
解决方法
我不得不在不久前解决同样的问题,到目前为止,我找到的最正确的解决方案是使用媒体查询将实际窗口大小传递给Javascript.您必须按照以下步骤操作：
>在页面中添加隐藏元素,
>使用媒体查询来更改该元素的max-width属性,
>通过Javascript读回该元素的max-width属性.
<div id="currentMedia"></div>
然后编写以下CSS规则：
#currentMedia {
display: none;
}
@media (max-width: 720px) {
/* Make arrows in the carousel disappear... */
#currentMedia {
max-width: 720px;
}
}
然后,从Javascript方面,您可以写：
if (parseInt(jQuery("#currentMedia").css("max-width"),10) <= 720) {
// Make arrows in the carousel stop working...
}
无论滚动条大小如何,它都将是准确的,因为该值来自触发轮播消失的相同媒体查询.
我在所有主要的最新浏览器上测试了这个解决方案,它给出了正确的结果
