We help IT Professionals succeed at work.

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

Thunderman54
Thunderman54 asked
on
60 Views
Last Modified: 2016-05-08
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;
            }
}
Comment
Watch Question

CERTIFIED EXPERT

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

Author

Commented:
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.
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
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.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.