Question

我在一个页面上有一个简单的网络应用程序。我目前正努力让它在尽可能多的设备上看起来正确。

看起来不错：

宏基笔记本电脑（1366 x 768）关于chrome，firefox和opera
htc one x （720 x 1280）on chrome，opera，firefox（bug of bug）
htc one （1080 x 1920）on chrome和firefox（几个bug），还没有测试过opera

看起来很糟糕：

htc默认浏览器（在htc上测试x / one
UC浏览器（on htc one x）
Safari iphone 4s （最新）
可能是IE，但老实说，我还没有检查过。

搞砸==完全不合适的元素和错误的尺寸，好像主要布局被忽略了

无论如何， chrome和firefox 的共同点是。它看起来正确，虽然firefox看起来有点问题。

应用程序本身为here

我的问题是：

如何让我的应用在第二个列表中的浏览器上看起来正确？我在网上寻找解决方案无济于事。每个人似乎都有他们自己的媒体查询集，他们声称这些查询适用于他们。到目前为止，没有一个对我有用。

我目前正在使用以下css，它适用于上述设备和浏览器：

@media only screen and (max-width: 2000px) {

    body {
    /*border: 1px dashed white;*/
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

    justify-content: center;
    position: relative;
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    background-image: url(background-soundproof.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }

    div {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

    width: 100%;
    position: relative;

    }

    p {
    width: 100%;
    text-align: center;
    margin: auto;
    }

    #main {
    /*border: 1px solid blue;*/
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    width:  40%;
    height: 99%;
    margin: auto;
    }

    #top {
    /*border: 1px solid green;*/
    height: 30.76923076923077%;
    } #top p {

    color:black;
    text-shadow: 2px 0 12px white,
                -2px 0 12px white,
               24px  0 50px #7D7DBD,
              -24px  0 50px #7D7DBD;

    text-transform: capitalize;
    font-family: Impact, Sans-Serif;
    font-weight: 100;
    font-size: 3em;
    width: 80%;
    }

    #mid {
    /*border: 1px solid yellow;*/
    height: 15.384615384615385%;
    top: -7%;
    } #mid img {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

    width: 40%;
    margin: auto;
    cursor: url(cool_pointer.png), pointer;
    }

    #bottom {
    /*border: 1px solid red;*/
    } #bottom p {
    text-shadow:0 0 12px white;
    font-family:Courier, sans-serif;
    font-size: 1.5em;
    color:#7D7DBD;
    margin: auto;
    width: 100%;
    } #bottom img {
        display: none;
    }

    #footer {
    /*border: 1px dashed green;*/
    font-size: small;
    font-family: Courier;
    color: gray;    
    }

}

@media only screen and (min-width: 320px) and (max-width: 767px), 
       only screen and (min-device-width : 320px) and (max-device-width : 480px)/*iphone 2g-4s*/ {

    body {
        background-image: none;
        background-color: black;
    }

    #main {
    width: 100%;
    }
}

@media only screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape),
       only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {

    #bottom {
        display:none;
    }

    #main {
        justify-content: space-between;
    }

    #top {
        top: 7%;
    }

    #mid {
        top: 6%;
    } #mid img {
        width: 30%;
    }
}

Answer 1

除非您实际使用无法以其他方式再现的Flexbox功能，否则请勿使用Flexbox。如果您要提供前缀，请确保为每个属性提供所有前缀。

@media only screen and (max-width: 2000px) {
  /* line 10, ../sass/test.scss */
  body {
    /*border: 1px dashed white;*/
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    background-image: url(background-soundproof.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  /* line 24, ../sass/test.scss */
  div {
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    position: relative;
  }

  /* line 30, ../sass/test.scss */
  p {
    width: 100%;
    text-align: center;
    margin: auto;
  }

  /* line 36, ../sass/test.scss */
  #main {
    /*border: 1px solid blue;*/
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -moz-box-pack: justify;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    text-align: center;
    width: 40%;
    height: 99%;
    margin: auto;
  }

  /* line 46, ../sass/test.scss */
  #top {
    /*border: 1px solid green;*/
    height: 30.76923076923077%;
  }

  /* line 51, ../sass/test.scss */
  #top p {
    color: black;
    text-shadow: 2px 0 12px white, -2px 0 12px white, 24px  0 50px #7D7DBD, -24px  0 50px #7D7DBD;
    text-transform: capitalize;
    font-family: Impact, Sans-Serif;
    font-weight: 100;
    font-size: 3em;
    width: 80%;
  }

  /* line 64, ../sass/test.scss */
  #mid {
    /*border: 1px solid yellow;*/
    height: 15.384615384615385%;
    top: -7%;
  }

  /* line 70, ../sass/test.scss */
  #mid img {
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 40%;
    margin: auto;
    cursor: url(cool_pointer.png), pointer;
  }

  /* line 77, ../sass/test.scss */
  #bottom {
    /*border: 1px solid red;*/
  }

  /* line 81, ../sass/test.scss */
  #bottom p {
    text-shadow: 0 0 12px white;
    font-family: Courier, sans-serif;
    font-size: 1.5em;
    color: #7D7DBD;
    margin: auto;
    width: 100%;
  }

  /* line 90, ../sass/test.scss */
  #bottom img {
    display: none;
  }

  /* line 94, ../sass/test.scss */
  #footer {
    /*border: 1px dashed green;*/
    font-size: small;
    font-family: Courier;
    color: gray;
  }
}
@media only screen and (min-width: 320px) and (max-width: 767px), only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* line 105, ../sass/test.scss */
  body {
    background-image: none;
    background-color: black;
  }

  /* line 110, ../sass/test.scss */
  #main {
    width: 100%;
  }
}
@media only screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape), only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
  /* line 118, ../sass/test.scss */
  #bottom {
    display: none;
  }

  /* line 122, ../sass/test.scss */
  #main {
    -moz-box-pack: justify;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }

  /* line 126, ../sass/test.scss */
  #top {
    top: 7%;
  }

  /* line 130, ../sass/test.scss */
  #mid {
    top: 6%;
  }

  /* line 134, ../sass/test.scss */
  #mid img {
    width: 30%;
  }
}

需要某些移动浏览器的媒体查询解决方案

1 个答案: