【发布时间】：2014-03-11 02:34:03
【问题描述】：
我在一个页面上有一个简单的网络应用程序。我目前正在努力让它在尽可能多的设备上看起来正确。
看起来不错：
- acer 笔记本电脑（1366 x 768），支持 Chrome、firefox 和 opera
- htc one x(720 x 1280) on chrome、opera、firefox（几个错误）
- htc one（1080 x 1920）在 chrome 和 firefox（几个错误）上，尚未测试过 Opera
看起来搞砸了：
- htc 默认浏览器（在 htc one x/one 上测试过
- UC 浏览器（在 htc one x 上）
- iphone 4s上的 Safari（最新）
- 可能还有 IE，但老实说，我还没有检查过。
将 == 元素完全错位且尺寸错误，似乎主布局被忽略了
无论如何，它们的共同点是 chrome 和 firefox。它看起来对他们来说是正确的，虽然 Firefox 似乎对我的 jquery 有一些问题。
应用本身是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%;
}
}
【问题讨论】：
-
你能发一个jsfiddle吗？此外，您似乎正在尝试在布局中使用 flexbox。我刚刚阅读了this article，它解释了为什么我们不应该在站点结构上使用 flexbox，而不是它的福音。也许这些手机浏览器的问题是它们不支持 flexbox 模块，或者没有更新到更新版本来支持该模块。
-
您需要所有此代码来重现问题吗？此外，“看起来很糟糕”并不能描述问题。
-
@cimmanon 你对我的描述是正确的，更新了帖子。但是，我认为将所有 css 都放在那里可能是相关的，因为这很可能是 dward 建议的 flexbox 的问题。我目前正在测试这个
标签： android css mobile media-queries flexbox