jQuery全屏滑块视口宽度跨浏览器兼容问题求解决方案

你遇到的核心问题是不同浏览器对垂直滚动条是否计入视口宽度的处理逻辑不一致：Chrome、Firefox会把滚动条宽度从$(window).width()和document.body.parentNode.clientWidth中扣除，而Waterfox这类浏览器会将滚动条算进window.innerWidth，刚好差了标准滚动条的17px宽度。

下面给你几个简单易整合的跨浏览器兼容方案：

方案1：使用document.documentElement.clientWidth（推荐） #

这个属性在所有主流浏览器（包括你提到的Chrome、Firefox、Waterfox）中，都会返回不含滚动条的纯净视口宽度，是最稳定的取值方式。直接替换你代码里的宽度获取部分：

// 删掉原来的三个width变量，只保留这一行
var width = document.documentElement.clientWidth;
console.log('width = '+width);

方案2：动态适配差异场景 #

如果需要兼容极端边缘场景，可以通过检测两个宽度值的差值来动态调整：

var width;
// 判断滚动条是否会影响宽度取值
if (window.innerWidth !== document.documentElement.clientWidth) {
    // 差值存在，说明当前浏览器将滚动条算入innerWidth，用clientWidth取纯净宽度
    width = document.documentElement.clientWidth;
} else {
    // 无差值，直接用innerWidth即可
    width = window.innerWidth;
}
console.log('width = '+width);

额外优化：监听窗口尺寸变化 #

你的滑块目前只在初始化时获取一次宽度，当用户缩放浏览器、切换设备横竖屏时，滑块会出现适配错位。建议加上resize监听：

function updateSliderWidth() {
    width = document.documentElement.clientWidth;
    // 同步修正滑块容器的位置，避免宽度变化后错位
    $slideContainer.css('margin-left', '-' + ((currentSlide - 1) * width) + 'px');
}

// 初始化时执行一次
updateSliderWidth();
// 监听窗口 resize 事件
$(window).on('resize', updateSliderWidth);

顺便修复HTML小问题 #

看你的HTML代码，后面几个<img>标签的src属性没有闭合，比如：

<li class="slide slide2"><img src="<?php echo base_url('public/img/carousel/carousel-2.jpg'); ?></li>

建议补全闭合标签和alt属性，避免浏览器解析出错：

<li class="slide slide2"><img src="<?php echo base_url('public/img/carousel/carousel-2.jpg'); ?>" alt="轮播图"></li>

内容的提问来源于stack exchange，提问作者user791379