时间戳

首页 > 解决方案 > Mobile Bootstrap Carousel - 字体大小调整

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

问题描述

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

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

标签： htmlcssbootstrap-4

解决方案

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

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

欲了解更多信息，请访问此处

推荐阅读