FixedWidth


Deutsch

FixedWidth ist eine Erweiterung für den Safari Browser, welche Inhalte mit spezifischen Fenstergrössen anzeigt. Diese Erweiterung ist primär für Web-Entwickler gedacht, jedoch ist es gut möglich, dass auch normale Anwender Gefallen finden an dem einen oder anderen Button.

English

FixedWidth is an extension to the Safari browser which allows to display content with specific window sizes. This extension is primarily for web developers but there may be one or another button which a normal user may find convenient as well.


Durch Drücken des Fixed Width-Buttons passt sich der Inhalt automatisch gemäss seiner Breite der Fenstergrösse an. Für die meisten Seiten bedeutet dies: Kein horizontaler Scrollbalken sichtbar. Die Breite einer Seite ist durch die viewport-Angabe im Seiten-Quellcode festgelegt.

Fixed Width

By pressing the Fixed Width-button, the content automatically adjusts its width to the window size. For most of the websites this means: No more horizontal scrollbar is visible. The width is determined by the viewport definition of the source code of the page.

Durch Drücken des 75%- oder des 133%-Buttons wird der Inhalt mit dem entsprechenden Zoom dargestellt. Man beachte, dass 75% dem Zoom-Faktor entspricht, wenn ein iPad vom Quervormat ins Hochformat gedreht wird, und 133.333% genau umgekehrt.

75% and 133% View

By pressing the 75%- or the 133%-button, the content is displayed with the appropriate zoom. Note that 75% is the zoom factor when turning an iPad from landscape to portrait and 133.333% the other way around.

Durch Drücken des 1:1-Buttons passt sich das Fenster exakt an die viewport-Breite der Seite an und der Inhalt wird Pixel-genau dargestellt wie im Browser üblich. Nach dem Drücken des 1:1-Buttons ist jeglicher Zoom und jegliche Grössenändern dieser Erweiterung ausgeschaltet bis dass erneut ein Button gedrückt wird.

1:1 View

By pressing the 1:1-button, the window resizes to the viewport width of the page and the content is displayed pixel accurate as usual in the browser. After pressing the 1:1-button, any zoom or resizing of this extension is turned off until another button is pressed.


Zudem kann eine Website in der tatsächlichen Grösse eines iPhone- oder iPad-Displays angezeigt werden. Dadurch kann bereits am grossen Monitor abgeschätzt werden, ob der Inhalt für das entsprechende Gerät geeignet ist, wie beispielsweise, ob die Bedienelemente genügend gross sind.

iPhone and iPad Sizes

Additionally, a website can be viewed with the actual size of an iPhone- or iPad-display. Hence, it is possible to evaluate on the big monitor, if the content of a website is appropriate for the specific device, for example, if the UI-elements are big enough.

Damit das Browser-Fenster in der korrekten Grösse eines iPhones oder iPads angezeigt werden kann, muss die Erweiterung die Auflösung des Monitors wissen, an dem gearbeitet wird. Bei den Einstellungen kann die Auflösung in ppi (Pixel pro Inch) angegeben werden.

In order to display the window in the correct size of an iPhone or iPad, the extension needs to know the resolution of the display you are working on. In the preferences pane, you can enter the ppi (pixel per inch) of your display.


Weiteres...

  • Die Anzeige entspricht NICHT der tatsächlichen Anzeige auf dem Gerät, sondern es handelt sich um den in Safari eingebauten CSS-Zoom. Insbesondere können kleine Schriften nicht korrekt reproduziert werden.
  • Für die Anzeige der iDevices sowie für die 75%- und 133%-Anzeige muss der Browser-Zoom auf 100% sein.
  • Die Breite einer Seite wird mit der viewport-Angabe ermittelt. Durch Klicken auf den 1:1-Button wird das Fenster automatisch auf diese Breite gesetzt.
  • Es gibt keine Garantie auf universelle Anwendbarkeit.
  • Die gewählte Einstellung gilt global für alle Fenster, wird jedoch nur im aktuellen Fenster automatisch aktualisiert.
  • Die Bildschirm-Auflösung kann nicht automatisch ermittelt werden.
  • Bei der Anzeige der iDevices wird stets Platz für einen vertikalen Scrollbalken reserviert.

More...

  • The view does NOT correspond to the actual view on the device but instead uses the CSS-zoom functionality built in into Safari. Especially small fonts can not be reproduced correctly.
  • For the view of the iDevices as well as for the 75%- and 133%-view, the browser-zoom must be set to 100%.
  • The width of a website is determined by the viewport definition. By clicking on the 1:1-button, the window resizes to this width.
  • No guarantee can be given that this extension works universally.
  • The chosen setting is applied globally to all windows, although only the current window will be updated automatically.
  • The screen resolution can not be determined automatically.
  • The view of the iDevices automatically includes space for a vertical scrollbar.

Changelog

Version 1.3 (2010-07-15)
  • Implementation now much cleaner
  • 1.333- and .75-Button added
  • 1:1-Button instead of Display-Button. 1:1 resizes window to viewport.
  • Repackaging. Last version seems to not include the icon
Version 1.2 (2010-07-15)
  • Added a Fixed-View-Option which always adjusts the content to the width of the window. The content resizes with the window.
  • Changed order of script invocation for more stability.
  • Renamed Extension from iBrowserPreview to FixedWidth
  • Made a much nicer icon.
  • Script may run a little slow when resizing.
  • Scrollbars are not an option anymore.
Version 1.1 (2010-07-14)
  • Implementation simplified
  • View stays in the selected mode
  • Added a 5th button for going back to normal display mode
Version 1.0 (2010-07-14)
  • First release
  • 4 Buttons: iPhone and iPad, Portrait and Landscape
  • Correctly handles viewport