Slick Slider在iPhone单滑块模式下文字过大问题求助

问题说明 #

iPhone设备上，Slick Slider设置slidesToShow:1时，滑块内文字显示异常偏大——标题已设为13px，但仅在单滑块显示模式下出现此问题。

你的配置代码（已修正语法错误） #

$('.p-index__business__list ul').slick({
    autoplay: false,
    autoplaySpeed: 3000,
    slidesToShow: 3,
    arrows:true,
    dots:true,
    useTransform: false,
    responsive: [
        {
            breakpoint: 1300,
            settings: {
                slidesToShow: 2,
                arrows: true,
                dots: true,
                centerMode:true,
                centerPadding:'70px',
            }
        },
        {
            breakpoint: 1000,
            settings: {
                slidesToShow: 1,
                arrows: true,
                centerMode:true,
                centerPadding:'100px',
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                dots: true,
                centerMode:true,
                centerPadding:'80px',
            }
        }
    ]
});

原因排查与解决方法 #

1. 修复配置语法错误 #

原代码里responsive配置未用数组包裹，直接写对象会导致Slick初始化异常，断点触发时可能引发样式错乱。先按上面修正后的代码调整，确保responsive是数组格式。

2. 禁用iOS文字自动缩放 #

iOS Safari会对接近视口宽度的元素文字自动放大，添加以下CSS强制固定文字大小：

/* 替换成你的标题选择器 */
.your-title-class {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

同时检查页面<head>的视口标签是否正确设置，避免页面整体缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

3. 关闭单滑块模式下的Center Mode #

开启centerMode时，Slick会对滑块做缩放计算，单滑块模式下可能出现计算偏差导致文字放大。可以在响应式配置中，当slidesToShow:1时关闭centerMode：

{
    breakpoint: 1000,
    settings: {
        slidesToShow: 1,
        arrows: true,
        centerMode: false, // 关闭centerMode
        // 移除centerPadding，不需要再留内边距
    }
},
{
    breakpoint: 480,
    settings: {
        slidesToShow: 1,
        dots: true,
        centerMode: false,
    }
}

4. 强制覆盖滑块缩放样式 #

如果上述方法无效，直接强制禁用滑块的缩放变换：

.slick-slide {
    -webkit-transform: none !important;
    transform: none !important;
}

验证步骤 #

1. 先修正配置语法错误，确保responsive数组格式正确；
2. 给标题元素添加text-size-adjust属性；
3. 测试关闭单滑块模式下的centerMode是否解决问题；
4. 确认视口元标签配置正确。

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