Wie "lüge" man mediaquery? Wie man die Breite des Fensters vortäuscht?

Question

Im Entwickeln responsive Websites, und Sie alle wissen, es ist ein bisschen trostlos, das Fenster des Browsers manuell zu verkleinern (außerdem lässt mich Firefox es nicht nach einem Wert tun). Also entschied ich mich ein jQuery "plugin" zu schreiben, um den Bereich mit - oder + Buttons zu verkleinern.

Sobald ich dies schrieb:

$(document).ready(function() { 
    var doResizing = function(increaseWith) { 
     if ($('#xxxx').length == 0) { 
      $('body').css('margin', 0).css('padding', 0); 
      $('body > *').wrapAll('<div id="xxxx" /></div>'); 

      $('#xxxx').css('background-color', 'red') 
       .css('overflow', 'scroll') 
       .css('padding', 0) 
       .css('margin', 0) 
       .css('position', 'absolute') 
       .width('100%'); 
     } 
     $('#xxxx').height(parseInt($(window).height()) + 'px').width(parseInt($('#xxxx').width())+increaseWith + 'px'); 
    } 

    $(document).keypress(function(e) { 
     if (e.which == 45) { 
      doResizing (-10); 
     } 

     if (e.which == 43) { 
      doResizing (+10); 
     } 
    }); 
}); 

sein OK für die Kontrolle, aber auch mit der richtigen Definition der Medienabfrage, es wird es nicht kaufen. Wie kann man dann sagen, dass sich die Breite verändert hat, ohne das Fenster zu verändern?

Answer 1

Das Problem besteht darin, dass die Medienabfrage die Seite immer noch in voller Breite anzeigt. Sie könnten Ihren Code leicht die Seite zu nehmen und binde sie in einem Iframe anpassen und die Größe der iFrame:

var doResizing = function (increaseWith) { 
    if ($('#xxxx').length == 0) { 
      $('body').css('margin', 0).css('padding', 0); 
      $('body > *').wrapAll('<iframe id="xxxx" src="' + window.Location + '" /></iframe>'); 
      $('#xxxx').css('background-color', 'red').css('overflow', 'scroll').css('padding', 0).css('margin', 0).css('position', 'absolute').width('100%'); 
    } 
    $('#xxxx').height(parseInt($(window).height()) + 'px').width(parseInt($('#xxxx').width()) + increaseWith + 'px'); 
} 

Answer 2

Es ist ein Add-on für Firefox, die das tut: https://addons.mozilla.org/de/firefox/addon/more-display-resolutions/

Answer 3

Chrome eine eingebaute Funktion für die hat:

Wenn Sie die Einstellung nicht sehen gehen:
Settings > Devices > [Choose your devices]

Answer 4

In Firefox - Tools/Web Developer/Responsive Design View

Oder drücken Sie einfach Ctrl + Shift + M

So können Sie nach unten bekommen Bei kleinen Portgrößen wird auch die Bildlaufleiste verkleinert und überlagert - damit haben Sie auch nicht zu viel zu tun. (es ist dort, nur sehr klein, wie ein Handy)

Erstellen Sie voreingestellte Größen, wechseln Sie die Ausrichtung - gut ass.

Apologies, gerade auch dies in einem Kommentar gesehen, sowieso ..