asked on

Regards: @media queries / stylesheets and Firefox browser on Android tablet (ASUS).

I have a simple webpage that references an external stylesheet. That stylesheet includes media queries (I'll paste below). The page is rendering perfect on my windows notebook and desktop, in Safari on my wife's iPad, in both Chrome and Opera on my Asus tablet. For some reason, however, I can't get it to display properly using Firefox (v. 34) on my tablet (don't have FF on my notebook or desktop, so haven't tested there). In surfing the web, it seems FF has had some issues with media queries. Any help would be greatly appreciated. I've already tried adding "width=device-width" to my meta tag (below), but that did not resolve it. I'll post 2 lines from the head section of the html document, and then the external stylesheet (screens.css) below that.

<meta name="viewport" content="initial-scale=1, maximum-scale=1 user-scalable=no" />
<link rel="stylesheet" type="text/css" href="content/screens.css" />

/* small mobile devices */

@media only screen and (max-device-width:1020px) {

body
{
background-color: #999999;
margin: 0;
}

#vplayer
{
position: relative;
margin-left: 0;
margin-top: 0;
}
}

/* larger devices with 16:10 aspect ratio */

@media screen and (min-device-width: 1021px) and (device-aspect-ratio: 16/10) {

* {
            margin: 0;
            padding: 0;
            }

            html
            {
                  height: 100%;
                  background-color: #000;
                  background-image: url(bgimages/16_10.jpg);
                  background-attachment: fixed;
                  background-position: top left;
                  background-repeat: no-repeat;
                  background-size: cover;
                  overflow: hidden;
                  -webkit-background-size: cover;
                  -moz-background-size: cover;
-o-background-size: cover;
           }

            body
            {
                  height:100%;
                  overflow: scroll;
                  -webkit-overflow-scrolling: touch;
            }

            #bgcurtain
            {
                  clear: left;
                  width: 100%;
                  height:25in;
                  background-color: #000;
                  opacity: 0.8;
                  margin-top: 10in;
                  margin-bottom: 0px;
            }


            #vplayer /* The code below is supposed to center (horizontally) a div on any screen size as long as you specify the width of the div */
            {
                  clear: left;
                  margin-top: -16in;
                  margin-right: auto;
                  margin-left: auto;
                  width: 950px;
            }
}

/* larger devices with 16:9 aspect ratio */

@media only screen and (min-device-width: 1021px) and (device-aspect-ratio: 16/9) {

* {
            margin: 0;
            padding: 0;
            }

            html
            {
                  height: 100%;
                  background-color: #000;
                  background-image: url(bgimages/16_9.jpg);
                  background-attachment: fixed;
                  background-position: top left;
                  background-repeat: no-repeat;
                  background-size: cover;
                  overflow: hidden;
                  -webkit-background-size: cover;
                  -moz-background-size: cover;
-o-background-size: cover;
           }

            body
            {
                  height:100%;
                  overflow: scroll;
                  -webkit-overflow-scrolling: touch;
            }

            #bgcurtain
            {
                  clear: left;
                  width: 100%;
                  height:25in;
                  background-color: #000;
                  opacity: 0.8;
                  margin-top: 10in;
                  margin-bottom: 0px;
            }


            #vplayer /* The code below is supposed to center (horizontally) a div on any screen size as long as you specify the width of the div */
            {
                  clear: left;
                  margin-top: -16in;
                  margin-right: auto;
                  margin-left: auto;
                  width: 950px;
            }
}

/* larger devices with 4:3 aspect ratio */

@media only screen and (min-device-width: 1021px) and (device-aspect-ratio: 4/3) {

* {
            margin: 0;
            padding: 0;
            }

            html
            {
                  height: 100%;
                  background-color: #000;
                  background-image: url(bgimages/4_3.jpg);
                  background-attachment: fixed;
                  background-position: top left;
                  background-repeat: no-repeat;
                  background-size: cover;
                  overflow: hidden;
                  -webkit-background-size: cover;
                  -moz-background-size: cover;
-o-background-size: cover;
           }

            body
            {
                  height:100%;
                  overflow: scroll;
                  -webkit-overflow-scrolling: touch;
            }

            #bgcurtain
            {
                  clear: left;
                  width: 100%;
                  height:25in;
                  background-color: #000;
                  opacity: 0.8;
                  margin-top: 10in;
                  margin-bottom: 0px;
            }


            #vplayer /* The code below is supposed to center (horizontally) a div on any screen size as long as you specify the width of the div */
            {
                  clear: left;
                  margin-top: -16in;
                  margin-right: auto;
                  margin-left: auto;
                  width: 950px;
            }
}

Peter Hart

could you be more specific about "can't get it to display properly using Firefox" is it the layout, the background?

Thunderman54

ASKER

Well, to my surprise, since I posted this question I have found out that the screen resolution on my tablet is not 1920 x 1200 as I thought, but 1280 x 752. This may (??) have something to do with the problem. When I plug those numbers (1280 x 752) in an aspect ratio calculator I come up with 1.7. This kind of puzzles me . . . as far as how I should express that in a media query. I mean, 16/9, 16/10, 4/3, etc., are all pretty standard, but surely you don't express 1280 x 752 as 1/7. (??) Well, anyway, discovering that my screen res is not what I thought it was has got me going in a different direction as far as searching for a solution. Maybe it's not a matter of mobile FF browser not interpreting device-aspect-ratio correctly. Maybe I just haven't defined it properly in the query based on what my resolution actually is. To answer your question more precisely, what is currently happening with FF on my Android (Asus) tablet is it is applying the styles from the first query above. Ironically, however, Opera and Chrome on my tablet apply styles from the second query (16/9 aspect ratio). I did install FF on my notebook and it is loading the the correct styles. Any thoughts would be appreciated.

ASKER CERTIFIED SOLUTION

Peter Hart

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Thunderman54

ASKER

I've been on that Mozilla site many times. There is a lot of good stuff there. Your suggestion did cause me to take a closer look at the different operators (and, only, not, etc.) and how they all work. But . . . having said that, I think there is definitely some issue with mobile Firefox not recognizing the "device-aspect-ratio" media query . . . at least on an Android device. I did a lot of testing. Thanks for responding. Let me know if you come across anything out there "in the wild" that addresses this. I have a feeling it's one of those issues the FF developers are trying to fix . . . but not 100% sure of that, of course. I did try all of the suggestions you mention above, but no luck. :( Thanks again, though.