Solved

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

Posted on 2015-01-01
6
33 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
  • 2
  • 2
6 Comments
 
LVL 28

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 28

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Responsive CSS question 2 42
Box Model and Styling 12 21
Bootstrap input box width 2 16
Angular 2 complaining about map file 7 6
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now