https://github.com/thetwopct/responsive-resizer-extension-for-safari

Responsive Resize Extension for Safari on MacOS. Quickly and simply resize the Safari browser window with precision when working on responsive website designs. Supports a full range of popular breakpoints, plus exact width and heights for the Top 6 screen sizes in the world.
https://github.com/thetwopct/responsive-resizer-extension-for-safari

macos responsive-design responsive-web-design safari safari-extension

Last synced: 28 days ago
JSON representation

Responsive Resize Extension for Safari on MacOS. Quickly and simply resize the Safari browser window with precision when working on responsive website designs. Supports a full range of popular breakpoints, plus exact width and heights for the Top 6 screen sizes in the world.

• Host: GitHub
• URL: https://github.com/thetwopct/responsive-resizer-extension-for-safari
• Owner: thetwopct
• Created: 2019-09-08T08:43:43.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2019-11-20T02:40:14.000Z (almost 5 years ago)
• Last Synced: 2023-08-01T15:53:55.485Z (over 1 year ago)
• Topics: macos, responsive-design, responsive-web-design, safari, safari-extension
• Language: HTML
• Homepage:
• Size: 35.2 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
Unfortunately this Extension no longer works with Safari 13. Interested in a compatible version? Give [this post a thumb up](https://github.com/thetwopct/Responsive-Resizer-Extension-for-Safari/issues/1).

============

Responsive Resizer Extension for Safari for MacOS

============

Resize the Safari browser window with precision when working on responsive website designs.

This Safari Extension lets you quickly and easily  change the viewport size of the Safari browser window. Ideal for testing mobile/handheld device sizes, or for live coding and arranging windows on small screens.

This extension is perfect for when you're doing responsive design. You can even use the Web Inspector like normal to inspect code.

Window sizes supported and features

============

- 320px wide

- 375px x 667px (iPhone 6, 6s, 7, 8)

- 414px x 736px (iPhone 6+, 7+, 8+)

- 480px wide

- 481px wide

- 767px wide

- 768px wide

- 1024px wide

- 1120px wide

- 1240px wide

- Full Screen

- Custom Width

- +1 pixel

- -1 pixel

- Move window to left

- Move window to right

Top 6 screen sizes worldwide:

- 1024x768

- 1366x768

- 1440x900

- 1536x864

- 1280x800

- 1280x1024

For 15" MacBook users, you can use 320px + 1120px windows next to each other for optimum layout. The 1120px window resize moves window to the right because of this.

Download

============

[Download latest version!](https://github.com/thetwopct/Responsive-Resizer-Extension-for-Safari/raw/master/ResponsiveResizerSafari.safariextension.zip)

Install

============

This is an unofficial and unsigned Safari extension so you need to install it via Develop menu.

To install:

- [Download latest version](https://github.com/thetwopct/Responsive-Resizer-Extension-for-Safari/raw/master/ResponsiveResizerSafari.safariextension.zip)

- Move it to somewhere safe and easy to access (Downloads, Documents) and uncompress the zip file

- Keep the name of the folder as it is

- Open Safari, go to Preferences, go to Advanced, then click "Show Develop menu in menu bar"

- Open Develop menu, go to Show Extension Builder

- Click + to Add Extension

- Select the folder

- Enter your admin password to confirm the action (MacOS security)

- The extension is now installed

- You can inspect the full details of the extension at this stage (it simply loads CSS, that's all)

For more details on installing extensions in this way (it's legit!), [see this article](https://georgegarside.com/blog/macos/install-any-safari-extension-macos-mojave/).

Feedback

============

Open a GitHub issue, tweet me [@thetwopct](https://twitter.com/thetwopct) or visit [https://www.thetwopercent.co.uk](https://www.thetwopercent.co.uk)