Bootstrap 3 媒体查询可在 Chrome 上运行，但不能在移动设备上运行

Question

好吧，这个问题之前已经被问过很多次了，我每个人都问过，但对我没有用

在移动视图中，我想将幻灯片 col 位置从相对设置为静态，这将导致此

但我在移动设备上看到了这个（相邻的 col 重叠）

这意味着 Col 仍处于相对位置，媒体查询在移动平台上不起作用，但它在桌面 Chrome 浏览器中起作用。

我使用了元标记和不同的最小值和最大值组合（在确认屏幕分辨率后）

例如

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

 /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-width : 320px)
    and (max-width : 480px) {

section.banner .slideshow-col{
        position: static;
    }

    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width : 320px) {

section.banner .slideshow-col{
        position: static;
    }

 @media (min-width : 700px) {
   section.banner .slideshow-col{
        position: static;

    }

@media (min-width: 992px) {


        section.banner .slideshow-col{
        position: relative;
    }}

@media (min-width: 1200px) {


        section.banner .slideshow-col{
        position: relative;
    }}

我的网站在这里 http://

有什么提示吗？

Answer 1

尝试使用此解决方案

@media screen and (max-width: 760px){
    .slideshow-col {
        position: relative;
        height: 300px; <--  height of the slideshow
        // You can use min & max height of slideshow for mobile devices
        height: auto;
        min-height: xxx;
        max-height: xxx;
    }
}