CSS媒体查询无法在Samsung Galaxy上运行

Question

以下是我网站的网址：

http://isometricland.net/games/games.php

我在应用媒体查询之前默认设置了这些规则：

div#outerframe
{position:relative;width:80em;min-height:100%;margin-left:auto;margin-right:auto;}
div#leftframe
{display:block;}
div#middleframe
{position:absolute;width:60em;min-height:100%;margin-left:15em;margin-right:auto;background:url(images/layout_brushedmetal_vert.png) fixed repeat-x;}

然后我有以下媒体查询（是的，有些是重复的）：

@media screen and (min-width: 80em)
{
    div#outerframe
    {position:relative;width:80em;max-width:100%;min-height:100%;margin-left:auto;margin-right:auto;}
    div#leftframe
    {display:block;}
    div#middleframe
    {position:absolute;width:60em;min-height:100%;margin-left:15em;margin-right:auto;background:url(images/layout_brushedmetal_vert.png) fixed repeat-x;}
}
@media screen and (max-width: 80em) and (min-width: 60em)
{
    div#outerframe
    {position:relative;width:60em;max-width:100%;min-height:100%;margin-left:auto;margin-right:auto;}
    div#leftframe
    {display:none;}
    div#middleframe
    {position:absolute;width:60em;min-height:100%;margin-left:auto;margin-right:auto;background:url(images/layout_brushedmetal_vert.png) fixed repeat-x;}
}
@media screen and (max-width: 60em)
{
    div#outerframe
    {position:relative;width:100%;min-height:100%;margin-left:auto;margin-right:auto;}
    div#leftframe
    {display:none;}
    div#middleframe
    {position:absolute;width:100%;min-height:100%;margin-left:auto;margin-right:auto;background:url(images/layout_brushedmetal_vert.png) fixed repeat-x;}
}

在几款三星Galaxy型号上，这会导致我网站的主要内容完全消失。为了演示，这是我的网站没有媒体查询的样子：

这不完美，但内容就在那里。

以下是启用媒体查询时的样子：

造成这种情况的原因是什么？有解决方法吗？ Safari，Edge，UC浏览器和桌面Chrome似乎可以正确呈现网站。

谢谢！

Answer 1

事实证明，当您在CSS媒体查询中使用em单位时，三星Galaxy模型不喜欢它。 E.g。

@media screen and (min-width: 60em) and (max-width: 80em)

很糟糕。但

@media screen and (min-width: 1024px) and (max-width: 1280px)

很好。