-1
我在一個頁面上有一個簡單的網絡應用程序。我目前正在努力使其儘可能多地在多個設備上正確顯示。需要某些移動瀏覽器的媒體查詢解決方案
它看起來罰款：
- acer筆記本（1366×768）在Chrome，Firefox和Opera
- 的的HTC One上的鍍鉻X（720×1280），歌劇，火狐（夫婦的bug）
- 在Chrome和Firefox（夫婦的bug）的的HTC One（1080×1920），還沒有測試過歌劇
它看起來擰在：
- 的HTC默認瀏覽器（在HTC測試一個X /一個
- 的UC瀏覽器（在HTC一個X）
- Safari瀏覽器在iphone 4s（最新）
- 和可能的IE，雖然老實說，我還沒有檢查。
搞砸了==元素完全出來的地方和錯誤的大小，好像主要佈局被忽略
的共同點有Chrome和Firefox反正。它看起來是正確的，雖然Firefox看起來像我的jQuery的一些問題。
軟件本身here
我的問題是：
我怎樣才能得到我的應用程序看起來正確在第二列表中的瀏覽器？我已經在網上尋找解決方案無濟於事。每個人似乎都有自己的媒體查詢，他們聲稱他們的作品。到目前爲止，沒有人爲我全線工作。
我目前使用下面的CSS，其中上述設備和瀏覽器的工作原理：除非你實際上利用的Flexbox的功能，否則就無法複製
@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%;
}
}
你能發表一個jsfiddle嗎？此外，它看起來像你試圖在你的佈局上使用flexbox。我剛剛閱讀[這篇文章]（http://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/），解釋了爲什麼我們不應該在網站結構上使用flexbox，而不是它的福音。這些手機瀏覽器的問題可能是他們不支持Flexbox模塊，或者沒有更新到更新的版本來支持模塊。 – dward
您需要此代碼的全部*才能重現問題？此外，「看起來搞砸了」並沒有描述問題。 – cimmanon
@cimmanon你說得對我的描述，更新後。不過，我認爲把所有的CSS都放在一起可能是相關的，因爲這可能是一個柔性盒的問題，正如Dward所建議的那樣。我目前正在測試這個 – Totem