Sostituzione di fogli di stile con jQuery a seconda delle dimensioni dello schermo

Question

Ciao, mi chiedo se qualcuno può aiutare, sto cercando di creare un sito reattivo usando jQuery (devo farlo in questo modo perché il pubblico di destinazione è su IE7/8 e css3-mediaqueries .js sembra interferire con l'interfaccia utente di jQuery che sto usando anche). Sto usando il seguente script per rilevare larghezza e altezza e applicare gli stili di conseguenza, funziona benissimo per la larghezza ma non per l'altezza, carica lo SMstyle.css quindi sovrascrive con lo style.css. Sto cercando di imparare JavaScript ma non molto forte al momento, so che c'è un modo più semplice! Qualsiasi aiuto sarebbe apprezzato ...

function adjustStyle(width) { 
     width = parseInt(width); 
     if ((width >= 701) && (width < 1200 
     )) { 
      $("#size-stylesheet").attr("href", "css/SMstyle.css"); 
     } else { 
      $("#size-stylesheet").attr("href", "css/style.css"); 
     } 
    } 

    $(function() { 
     adjustStyle($(this).width()); 
     $(window).resize(function() { 
      adjustStyle($(this).width()); 
     }); 
    }); 

    function adjustStyle(height) { 
     height = parseInt(height); 
     if (height < 800 
     ) { 
      $("#size-stylesheet").attr("href", "css/SMstyle.css"); 
     } else { 
      $("#size-stylesheet").attr("href", "css/style.css"); 
     } 
    } 

    $(function() { 
     adjustStyle($(this).height()); 
     $(window).resize(function() { 
      adjustStyle($(this).height()); 
     }); 

    }); 

Answer 1

Quando si tratta di layout reattivi, non si ha realmente a cuore l'altezza. L'intero concetto è che se il contenuto non si adatta alla larghezza, collassa (e quindi aumenta l'altezza).

EDIT:

Credo che hai bisogno di usare $ (document) invece di $ (this), dal momento che l'ambito di $ (questo) sarà diverso quando si attiva manualmente e quando è innescato da un evento di ridimensionamento.

function adjustStyle() { 
    var width = $(document).width(); 
    var height = $(document).height(); 
    if (((width >= 701) && (width < 1200)) || (height < 800)) { 
     $("#size-stylesheet").attr("href", "css/SMstyle.css"); 
    } else { 
     $("#size-stylesheet").attr("href", "css/style.css"); 
    } 
} 

adjustStyle(); 
$(window).resize(function() { 
    adjustStyle(); 
}); 

per vedere i diversi ambiti, provate questo:

$(function() { 
    console.log('Scope', $(this)); // Scope is DOM-element 
    $(window).resize(function() { 
     console.log('Scope', $(this)); // Scope is Window object. 
    }); 
}); 

Answer 2

refactoring (non testato)

function adjustStyle(width, height) { 
    width = parseInt(width); 
    height = parseInt(height); 
     if (((width >= 701) && (width < 1200)) || (height < 800)) 
      $("#size-stylesheet").attr("href", "css/SMstyle.css"); 
     else 
      $("#size-stylesheet").attr("href", "css/style.css"); 
} 

$(function() { 
    adjustStyle($(this).width(), $(this).height()); 
    $(window).resize(function() { 
     adjustStyle($(this).width(), $(this).height()); 
    }); 
});