CSS 媒体查询在三星 Galaxy 上不起作用

Posted 2023-03-06

【中文标题】CSS 媒体查询在三星 Galaxy 上不起作用

【英文标题】：CSS media query not working on Samsung Galaxy

【发布时间】：2016-12-31 18:33:00

【问题描述】：

这是我网站的网址：

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 似乎可以正确呈现网站。

谢谢！

【问题讨论】：

这可能是您使用的绝对定位。如果您尝试构建响应式网站，还应该考虑使用响应式元标记。

我忘了说除了媒体查询我还有一些默认规则。更新了我的问题。

【参考方案1】：

事实证明，当您在 CSS 媒体查询中使用 em 单位时，那些三星 Galaxy 机型并不喜欢它。例如

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

不好。但是

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

很好。