CSS media query not working on Samsung Galaxy

Question

Here's the URL to my site:

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

I have these rules set by default before applying the media queries:

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;}

Then I have the following media queries (yes some are duplicates):

@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;}
}

On several Samsung Galaxy models this causes the main content of my site to disappear completely. To demonstrate, here is what my site looks like without the media queries:

It's not perfect, but the content is there.

And here is what it looks like with the media queries enabled:

What is causing this? Is there a workaround? Safari, Edge, UC Browser and desktop Chrome seem to render the site properly.

Thanks!

Answer 1

It turns out those Samsung Galaxy models do not like it when you use em units in CSS media queries. Eg

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

is bad. But

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

is good.