Solved

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

Posted on 2015-01-01
6
40 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;
            }
}
0
Comment
Question by:Thunderman54
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
6 Comments
 
LVL 29

Expert Comment

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

Author Comment

by:Thunderman54
ID: 40531092
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
 
LVL 29

Accepted Solution

by:
chilternPC earned 500 total points
ID: 40531114
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
 

Author Comment

by:Thunderman54
ID: 40532602
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

Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

635 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question