Question

我在我正在处理的站点上添加了一个简单的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;
    }
}

这是一个用于证明的轮播，我正在使用的段落标签的字体大小设置为16px，就像我之前说的-最初，在移至第二个轮播项目之前，字体大小看起来正确。一旦我移到下一个轮播项目，字体大小就会增加几个像素。在轮播项目过渡之间，字体大小看起来正确，但是一旦过渡停止，字体大小就会跳回原来的位置。轮播实例化后，它将保持这种状态。

重申这仅在我的移动设备上。

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

首先感谢您的任何输入。我也很乐意提供更多信息。

Answer 1

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

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

有关更多信息，请访问here

移动Bootstrap轮播-调整字体大小

1 个答案: