Bootstrap 3 个媒体查询在 Chrome 上有效，但在移动设备上无效

Question

好的，这个问题已经被问过很多次了，我逐一检查过，但对我没有用

在移动视图中，我想将幻灯片放映的列位置从 Relative 设置为 Static，这将导致此结果

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

这意味着 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;
    }
}

Bootstrap 3 个媒体查询在 Chrome 上有效，但在移动设备上无效

Bootstrap 3 Media Queries working on Chrome but not on Mobile devices

mobile

overlapping

media-queries

twitter-bootstrap-3