A Safari extension that add toolbar to helps you designing and testing responsive websites and apps.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
ResponsiveBrowser.safariextz
versions.plist

README.md

Responsive Browser

A Safari extension bar to help you design and code responsive websites and apps. Safari 8+ support.

Banner

[Banner] (https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=CBDVTAKFKKJ48&lc=US&item_name=Responsive%20Browser&item_number=rb&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted)

##Features

  • Shows in real time values of the width and height of the Safari window;
  • Resizes precisely the Safari window by entering a value of width, height or both, usign the dedicated text fields or the keyboard;
  • Simulates the size of the following Apple devices through a responsive popup-panel. In either Portrait and Landscape modes:
    • iPhone 4
    • iPhone 5
    • iPhone 6
    • iPhone 6 Plus
    • iPad Air
    • iPad Mini
    • Macbook Air 11.6"
    • Macbook Pro 13.3"
    • Macbook Pro 15.4"
    • iMac 21.5"
    • iMac 27.5"
  • Create, organize and save your custom size presets through a dropdown menu, and use the, whenever you want
  • Responsive Browser extension supports Safari Live Updates, so after the installation you will be notified each time a new extension update is available.

Installation

Download the ResponsiveBrowser.safariextz file, double click on it to install the extension on your Mac.

How To

Activate Responsive Browser

Click on the button with the Ruler Icon on top of your window Safari toolbar to show the extension bar. If you do not see the button, right-click on the Safari toolbar and select Customize Toolbar from the menu, then drag and drop the Responsive Browser button inside the toolbar.

Banner

Use Apple Devices Presets

Click on the button with the Graph Icon and select one of the devices that appear. Click on a preset once for Portrait mode, twice for Landscape Mode

Banner

Banner

Set Custom Width and Height Window Properties

  • SHIFT + ↑ = Increment by 10
  • SHIFT + ↓ = Decrement by 10
  • = Increment by 1
  • = Decrement by 1

Press Enter on the keyboard to resize Safari window to the desired value.

Tip 1: Negative width and height values are automatically converted to positive

Tip 2: Leave a field blank to resize only the filled one. (Eg. To resize only the window width, leave the height field blank and press Enter)

Banner

Manage Custom Presets

Important Note Custom Presets are stored into the browser cache, if you empty the cache you'll lost every custom preset.

  • To Add a New Custom Preset fill both width and height fields with your desired values, then click on the dropdown menu and select Add New. A new preset with your custom values will be added into the menu

Banner

  • To Remove a Custom Preset select it from the dropdown menu, then click again on the dropdown menu and select Remove

  • To Remove All Custom Preset select Remove all from the dropdown menu

Banner

Contact

Follow me on Dribbble

Get in Touch via Email

Contributors

[Banner] (https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=CBDVTAKFKKJ48&lc=US&item_name=Responsive%20Browser&item_number=rb&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted)