Altering Styles Upon Device Width

Question

Meta Tags

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The above means mobile or any other device will not scale my website automatically and will therefore see my page as I intend them to do so.

CSS Styling

/** Default Global CSS Styles are here. **/

@media screen and (max-width: 979px) {
    /** At this point, my top navigation is too big **/
    /** for the device width, therefore we switch   **/
    /** to the mobile version of the navigation.    **/
}
@media screen and (min-width: 650px) and (max-width: 979px) {
    /** As the width gets smaller the content gets  **/
    /** smaller so this is to resize even more.     **/
}
@media screen and (max-width: 649px) {
    /** This is the final, smallest width option    **/
    /** I currently have in place.                  **/
}

@media screen and (min-width: 980px) {
    /** This is the main, non-mobile website view   **/
}

JQuery

$(window).resize(function () {
    var PageWidth = $('body').innerWidth();
    if (PageWidth > 979) {
        $('#TopNavList').show();
    } else {
        $('#TopNavList').hide();
    }
    $('#TopNavList').children("li").removeClass("active");
});

Due to having JQuery's slide and fade functions on my page, these implement inline css to my page upon being activated. All appears to be working how it should apart from when you replicate these steps:

Open up my webpage
Change your width slowly making it smaller
Between the two menus, nothing shows.

I have been battling out with this all week, I personally believe it is due to some browsers media queries width reading the inner width (without scrollbar) and some just the entire width (with scrollbar) however I haven't got a clue how to resolve.

I actually think your menu scales very nice. Can you elaborate on `3.Between the two menus, nothing shows.`? The menu shows fine for me on any width, it becomes a collapsed mobile menu after a certain min width and a regular one otherwise. — Hanky Panky, Jun 22 '14 at 01:51
Between roughly 1000px and 980 px the smaller menu icon does not appear. There's a 20px "gap". — Jorg, Jun 22 '14 at 01:52
Have a look here: http://stackoverflow.com/questions/8146874/issue-with-css-media-queriesscrollbar and http://stackoverflow.com/questions/11332284/css-media-queries-and-firefoxs-scrollbar-width — Jorg, Jun 22 '14 at 01:57

score 0 · Answer 1 · answered Jun 22 '14 at 10:33

Thanks to @Jorg with his comment left on my question, a new lead began which lead me to mqGenie.

mqGenie adjusts CSS media queries in browsers that include the scrollbar's width in the viewport width so they fire at the intended size, therefore I downloaded the script and simply linked to the script on my page and everything worked as they should.

I would highly recommend anyone who is dealing with the same problem to download mqGenie which is Licensed under the MIT license (see LICENSE for details) and the Minified version created with UglifyJS

Altering Styles Upon Device Width

1 Answers1