CODEWITHSUNDEEP
cssgoogle-chromemedia-queries
LefterisL
LefterisL

Reputation: 1143

CSS @media not working on mobile chrome only

I've been trying to edit some css for my website and change the logo dynamically according to width of the broswer.

Below is part of the css i'm using for it

@media only screen
and (max-width:460px){
    /*logo*/
    #main_logo{display:none;}
    #main_logo_retina{display:block;}
    .container-fluid{background-color:red;}
    /*logo*/
}

The above works fine on Firefox, Chrome on my Desktop. On mobile it only works on the default android browser. On Chrome it won't.

At first it was not working on the desktop chrome but it was because of the below format which i figured out

@media only screen and (max-width:460px){
    /*logo*/
    #main_logo{display:none;}
    #main_logo_retina{display:block;}
    .container-fluid{background-color:red;}
    /*logo*/
}

It works find on a Samsung Galaxy S4 on chrome. The app is the same version as mine. I am running on LG G3.

Since i'm using max-width and not max-device-width should the DPI difference affect this???

Thank you

Upvotes: 0

Views: 4017

Answers (1)

mmgross
mmgross

Reputation: 3092

Update

Damn, I just saw you updated your question and it's an LG G3 where your media query is not working. According to this useful page the G3's width is 480, so it makes totally sense that your media query for (max-width:460) gets ignored.

Original post

So, this won't be a definitive answer, but rather a list of things you could check, I'm only posting this as answer so I can include some nicely formatted code.

Scrollbars

Scrollbars (may) affect the size of your viewport and one of your browsers may handle scrollbars differently than the other.

Visual vs. layout viewport

The visual viewport is the size your content has to be displayed, so basically the size of your screen minus url bar, status bar, scroll bars.

If however your content doesn't fit into our viewport, it will be larger. The virtual viewport is basically the size of your content extrapolated from the size of your visual viewport. If that is the problem, you may be able to help your browser with the <viewport> tag.

You might be able to determine some of those possible reasons for your problem with the following html and JS:

HTML

<p>
    clientSize: <span id="viewport1"></span>
</p>
<p>
    innerSize: <span id="viewport2"></span>
</p>
<button id="recalc">Recalculate</button>

JS

function calcSize(){
    var win = $(window);
    var size = win.width() + "x" + win.height();
    var size2 = window.innerWidth + "x" + window.innerHeight;
    $('#viewport1').text(size);
    $('#viewport2').text(size2);
}

$('#recalc').click(function(){
    calcSize();
});
calcSize();

Create a page with that code, visit it with all browsers in question and see if you can spot differences, either between both values in the same browser or between the same value in different browsers.

Upvotes: 1

Related Questions