[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 46
  • Last Modified:

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;
            }
}
0
Thunderman54
Asked:
Thunderman54
  • 2
  • 2
1 Solution
 
chilternPCCommented:
could you be more specific about "can't get it to display properly using Firefox"    is it the layout, the background?
0
 
Thunderman54Author 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.
0
 
chilternPCCommented:
its hard to see how it works without a website page to examine.
but it may be the use of 'and' s and 'only' and the brackets being used not in the way we think logic should be used.
maybe removing some of the conditions such as  'only screen'
 Also the  "device-aspect-ratio"  might be worth using  "aspect-ratio" instead? (
this link describes the use of logic and brackets, might help.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
0
 
Thunderman54Author 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.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now