Browsertests

So können Sie die Größe des Browserfensters verändern

veröffentlicht am: 29.11.12, Autor: Peter Scheel

So können Sie die Größe des Browserfensters verändern

Im Webdesign und speziell bei der Webprogrammierung ist es erforderlich, die erstellen Websites sowohl in unterschiedlichen Browsern, aber auch in unterschiedlichen Monitorgrößen zu testen. Dies ist wichtig, um zu sehen, ob das Layout richtig skaliert und wichtige Teile des Inhaltes auch ohne Scrollen direkt sichtbar sind.

Hierbei ist es hilfreich, wenn man ein Hilfsmittel hat, um das Browserfenster per "Programmierbefehl" auf eine bestimmte Größe zu zwingen. Früher war das kein Problem - hier konnte mit einem kleinen Javascript dies erreicht werden.

In modernen Browsern ist das Verändern der Fenstergröße aus Sicherheitsgründen nicht mehr möglich!

Doch noch ein wenig Java-Script

In der Übergangszeit zu "modernen Browsern" gibt es noch einige Browser, die man tatsächlich noch mit einem simplen Java-Script beeinflussen kann. Die Zahl der Browser nimmt zwar stetig ab, aber folgende Browser lassen sich z. Zt. noch beeinflussen:

  • Internet Explorer 8 (IE 8)
  • Internet Explorer 9 (IE 9
  • Safari 5.1.7 (Windows)

 

Zu Browsern, die bereits aus Sicherheitsgründen diese Java-Scriptbefehle nicht mehr unterstützen zählen neuere Versionen von Firefox und Google Chrome

Wie kann man nun ältere Browser beeinflussen? Mit folgender simplen Funktion , die man in den Header der HTML-Datei integriert, ist dies möglich:

   
   <script type="text/javascript">
   function myresize (x,y)
   {
     var retval = window.resizeTo(x, y);
   }
   </script> 
   

Der Aufruf kann denn z.B. über modifitierte Links erfolgen:

   
   <a href="#" onclick="myresize(800,600);
   return true;">800x600</a>
   

Was den Browser veranlasst, das Browserfenster auf 800 x 600 Bildpunkte zu setzen.

Dies funktioniert nur, wenn der Browser nur einen Reiter (Tab) besitzt. Sobald mehrer Tabs vorhanden sind, geht das nicht mehr!

Für Eilige

Anbei einige vordefinierte Links (Größen), einfach anklicken und schon sollte der Browser sich den Vorgaben anpassen, sofern oben genannte Voraussetzungen erfüllt sind.

resize to:

320x480 480x320 800x600 1024x768 1280x800 1680x1050 1920x1200

 

Moderne Browser

Wie kann man nun in modernen Browsern wie Firefox, bzw. Google Chrome das gleiche erreichen? Javascript versagt hier. Aber dafür gibt es entsprechende Add-ons, die genau das gleiche erreichen.

Im folgenden möchte ich 2 Wege für den Firefox (ab Version 16.0) beschreiben. Vermutlich gibts so was auch für Chrome.

Web Developer

Falls Sie das Add-on "Web Developer" noch nicht intsalliert haben, können Sie das über folgenden Weg aus dem Browser heraus tun: ->Extras->Add-ons und benutzen Sie dann die Add-On Suche und folgenden Sie den Anweisungen. Nach der Installation können Sie unter vielen anderen nützlichen tools folgendes nutzen:

Responsive Layouts

Über ->Extras->Web Developer Extension->Resize->View Responsive Layouts wird Ihre Seite in einem neuen Fenster geladen und in verschiedene Fenstergrößen eingepasst. Das gibt schon mal einen richtig guten Überblick.

Resize to

Über das gleiche Plug-in haben Sie auch die Möglichkeit eigene Bildschirmgrößen selbst zu definieren und dann einzeln zu benutzen. Dies erreichen Sie über ->Extras->Web Developer Extension->Resize->Edit Resize Dimensions... - hier legen Sie zuerst mit ->Add einen neuen Namen und die Abmessungen fest. Danach können Sie diese direkt über ->Extras->Web Developer Extension->Resize->[Name] aufrufen.

Viel Spaß beim Browserfenster-Verkleinern!

 

Blogverzeichnis - Blog Verzeichnis bloggerei.de Bloggeramt.de

Artikel-Serien

 

Responsive Design

Browsertests mit unterschiedlichen Fensterbreiten haben wieder neue Aktualität gewonnen. Mit dem sogenannten Responsive Design, ist es wichtiger denn je geworden, umfangreicher Browsertests in unterschiedlichen Fensterbreiten durchzuführen.