Change CSS live based on page width

Question

I am trying to add certain styles to the page based on the current page width. I want this to function live. For example, when viewing on a iPhone and rotating the screen while viewing an already loaded page, the css will change. Also, I would ideally like to use the mobile jquery library. Thanks in advance for the help. Here is what I have so far which doesn't seem to work, I tried using LiveQuery also and that didn't work either

$(function() {
    $(document).live('css_init', function() {
           if (($(window).width()) > 430) {
                $('#main_panels .next').addClass("next-wide");
                $('#main_panels .prev').addClass("prev-wide");

           };
       });
       $(document).trigger('css_init');
});

Have you considered media queries? – Darek Rossman Feb 10 '12 at 22:03 — Darek Rossman, Feb 10 '12 at 22:03

score 6 · Answer 1 · answered Feb 10 '12 at 22:02

6

Stop right now, select all and hit the backspace/delete key on your keyboard.

Now that the horror of that has faded, let me introduce you to Media Queries. This is fully supported on all modern mobile devices (i.e. things with full web browsers, not WAP portals). It is also widely supported already in modern desktop browsers. The only exception is IE<9, and for that, you have Respond.js.

Now, go and bask in the glories of web standards.

answered Feb 10 '12 at 22:02

Chris Pratt

232,153
36
385
444

Works in Safari on my PC but isn't working on my mobile devices. This needs to update the CSS live, not just on load. – pbal Feb 10 '12 at 22:40
Media queries do update live. If they're not, then there's some issue with the queries you're using or your particular mobile device / mobile browser has some bug. Be aware as well, that some devices report widths and device-widths differently than others. Also, device-width is orientation-independent on some devices, i.e. the device-width is the device-width is the device-width, despite which way you're holding it. It may take some testing and tweaking to get your queries to work exactly as you expect, but welcome to the Web. – Chris Pratt Feb 14 '13 at 16:10

score 0 · Answer 2 · answered Feb 10 '12 at 22:03

0

could you use the jquery resize event listener?

myFunction() {
    var w = $(window).width();
    if (w > 430){
        // do stuff
    };
}
$(window).resize(function(){
    myFunction();
}

answered Feb 10 '12 at 22:03

Trav McKinney

988
8
24

score 0 · Answer 3 · answered Feb 10 '12 at 22:05

CSS Media Queries should do what you want without the javascript.

Try something like this:

<link rel='stylesheet' media='screen and (orientation:landscape)' href='css/landscape.css' />

You may want to add some hard resolutions contraints but thats easy to do.

http://css-tricks.com/css-media-queries/

Change CSS live based on page width

3 Answers3