javascript - 我的滑块在 iPad 和 Kindle Fire Linux 模式下无法正常工作

Question

我的电子商务网站https://www.bencetupperware.com/有一个问题，它是用 MVC.Net 编写的。页面顶部有一个滑块。我用响应设计模式检查了 Mozilla 上的网站。它可以在 iphone 6/7/8、galaxy 等其他平台上正常工作，但问题出在 iPad 和 Kindle Fire Linux 上。有人知道吗？

标签： javascriptcssasp.net-mvcslider

Answer 1

更新：要更改的内容：将此媒体查询更改为具有较小的字体大小（它是 45px）：

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-content-1 h3 {
        font-size: 16px;
    }
}

您需要查看font-sizecss 样式文件中的设置。为一些较小的屏幕尺寸选择了相当大的字体。我在笔记本电脑上更改了 Chrome 上的窗口大小，发现我需要减小 h3 字体大小以使其不会太大以至于在其他框下延伸。

    .slider-content-1 h3 {
        font-size: 45px;
        font-family: "TupperPRO", cursive;
        color: #D3007E;
        margin: 0;
        font-weight: bold;
        font-style: normal;
    }

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slider-content-1 h3 {
        font-size: 70px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-content-1 h3 {
        font-size: 65px; /* THIS IS LARGE */
    }
}

@media only screen and (max-width: 767px) {
    .slider-content-1 h3 {
        font-size: 18px; /* THIS GETS OVERWRITTEN BY THE NEXT ONE FOR SOME DEVICES */
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-content-1 h3 {
        font-size: 45px;/* I NEEDED TO MAKE THIS SMALLER */
    }
}

这会在笔记本电脑 (Chrome) 和真正的 iPad (Safari IOS 14) 上显示该站点以显示问题。