A Safari extension bar to help you design and code responsive websites and apps. Safari 8+ support.
- 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.
Download the ResponsiveBrowser.safariextz file, double click on it to install the extension on your Mac.
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.
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
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)
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
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
Follow me on Dribbble
Get in Touch via Email