CODEWITHSUNDEEP
jqueryhtmlcss
bonaca
bonaca

Reputation: 125

css media - screen width inconsistencies

css 

 html{
    overflow-y:scroll;
    }

js 

function showW(){
    var a=($(window).width());
    $('#show').html(a);
}

Result in Chrome is 1009. Result in Firefox is 1007. Why? What is the truth?

I tried to replace width() with outerWidth() - results are same.

@media only screen and (max-width:960px){...

This executes on 945px (Chrome) and 943px - Firefox.

Maybe, scrolbar is 15px (945+15=960)

My Display Settings (win xp) is - 1024x768.

Could someone explain this inconsistencies.

My final goal is to execute css media really on 960 px (including scrollbar) in all browsers, or at least in Chrome and Firefox.

Upvotes: 0

Views: 182

Answers (1)

Huangism
Huangism

Reputation: 16438

The inconsistency is due to the scrollbar.

Look at this example using media query

http://jsfiddle.net/CU4Q6/

div {
    background: green;
    width: 300px
}

@media only screen and (max-width:300px){
    div {
        background: red;
    }
}

You can see the box changing colour after the scrollbar covers the box. So media query outputs the window width with scrollbar when it is present. On iPad, media query's width is the screen size (including the scrollbar when present). This makes sense because you don't want the width to change when the scrollbar appears because if that happens then it is possible to have media queries that alter the site at 2 very close width

If you need to sync the width from media query to js. Then you can add a css rule for an invisible element or a visible element (whatever) then use js to check for that css property when resizing the window.

It is important to note that people now uses all kinds of different devices to view webpages, it's not too important to target an exact width.

Upvotes: 1

Related Questions