html - Mobile Bootstrap Carousel - 字体大小调整

Question

我已将一个 simply bootstrap 4 轮播添加到我正在处理的网站，并且轮播本身正常工作。

当我在我的移动设备 (Galaxy S8+) 上检查网站并向下滚动到引导轮播时，字体大小最初是正确的，但随着我滚动浏览每个轮播元素而变大。

我的问题是，手机屏幕分辨率或像素密度是否会导致此问题？我也在Iphone4和Iphone7上看过这个网站，字体没有放大，这是我想要的。

我有调整段落高度的媒体查询，因此当用户滚动到不同的轮播元素时容器不会调整大小

@media screen and (max-width: 1200px) {
    .testimonial-text {
        min-height: 185px;
    }
}

@media screen and (max-width:991px) {
    .testimonial-text {
        min-height: 215px;
    }
}

@media screen and (max-width:767px) {
    .testimonial-text {
        min-height: 215px;
        width: 100%;
    }
}

@media screen and (max-width:522px) {
    .testimonial-text {
        min-height: 240px;
    }
}

@media screen and (max-width:456px) {
    .testimonial-text {
        min-height: 265px;
    }
}

@media screen and (max-width:413px) {
    .testimonial-text {
        min-height: 315px;
    }
}

@media screen and (max-width:368px) {
    .testimonial-text {
        min-height: 375px;
    }
}

这是一个用于推荐的旋转木马，我使用的段落标签的字体大小设置为 16 像素，正如我之前所说 - 最初，在移动到第二个旋转木马元素之前，字体大小看起来是正确的。一旦我移动到下一个轮播元素，字体大小就会增加几个像素。在轮播元素转换之间，字体大小看起来是正确的，但一旦转换停止，字体大小就会跳回来。一旦轮播被实例化，它就会保持这样。

重申一下，这仅适用于我的移动设备。

jsfiddle - https://jsfiddle.net/a92ys80v/20/

提前感谢您的任何意见。我也很乐意提供更多信息。

Answer 1

我不清楚你想要什么，但如果你想减小字体大小或为移动/设备提供任何样式，你可以为该设备宽度编写媒体查询，如下所示

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
} 

欲了解更多信息，请访问 here