这是我网站的 URL:
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;}
}
在几款 Samsung Galaxy 型号上,这会导致我网站的主要内容完全消失。为了演示,这是我的网站在没有媒体查询的情况下的样子:
它并不完美,但内容就在那里。
下面是启用媒体查询后的样子:
这是什么原因造成的?有解决方法吗? Safari、Edge、UC 浏览器和桌面版 Chrome 似乎可以正确呈现网站。
谢谢!
最佳答案
事实证明,当您在 CSS 媒体查询中使用 em 单位时,那些 Samsung Galaxy 模型不喜欢它。例如
@media screen and (min-width: 60em) and (max-width: 80em)
不好。但是
@media screen and (min-width: 1024px) and (max-width: 1280px)
很好。
关于android - CSS 媒体查询不适用于三星 Galaxy,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39126426/