Safari Window Width On Yosemite

One solution that I read elsewhere is to go to View > Show Sidebar. This turns on the sidebar and effectively narrows the portion of the browser window that shows the actual content. I'm still looking for a better (cleaner) solution, as I do not like having the sidebar turned on during development. It just adds more visual clutter.

Not sure I understand the problem, but if you put your cursor at the right side of a Safari window and it becomes a double arrow, can't you adjust the width to the desired size?

The issue is that Safari now has a minimum width that is wider than it used to be in previous versions. I used to be able to mimic the width of an iPhone 5 by dragging a Safari window to its minimum width, but now the minimum width is too wide to mimic smaller screen mobile devices. The only way that I have found to make the content area more narrow is by opening Safari's sidebar.

You can resize the window frame to practically any dimension you want; scaling the content in the viewport is another matter...

To resize the active window in Safari, use this script in Script Editor:

tell application "Safari" to set the bounds of the front window to {0, 23, 780, 780}

The equivalent Terminal command:

osascript -e 'tell application "Safari" to set the bounds of the front window to {0, 23, 780, 780}'

The bounds refer to the bounding rectangle of the window using four numbers in an ordered set. The numbers individually define either the distance in pixels from the left or top of the screen. The first pair of numbers are coordinates that define the point of the top left of the rectangle and the second pair define the bottom right point of the rectangle.

To get the bounds of the active window in Safari, use this script in Script Editor:

tell application "Safari" to get the bounds of the front window

The equivalent Terminal command:

osascript -e 'tell application "Safari" to get the bounds of the front window'

Another option is to install Safari extensions to control window resizing options. One is ResponsiveResize:

Another is Resize Window:

ResizeMyBrowser is an interesting web-based solution. You can create your own preset:

To scale web content in various viewports...

If you want to view a website that uses responsive design in different viewports, you can use a browser-based tool such as Viewport Resizer. Drag the provided bookmarklet to your Favorites bar and click once you've navigated to a website. There are options to click on preconfigured settings, or customize your own. Websites are live and fully interactive in various viewports. You can also use local .html files (i.e. file:///Users/<username>/path/to/file.html). Save the source file locally for any website from Safari's menu bar: File > Save As > Format: Page Source.

Desktop viewport:

iPhone 5 horizontal viewport:

iPhone 5 vertical viewport:

For presentation another web-based tool, FrameApp, uploads an image you provide (i.e. from Resizer) and presents it in a selection of device frames to download in a PNG image format:

Another web-based tool, Placeit, provides a selection of device frames in an environment:

50 Examples of Responsive Web Design

greg263 wrote:

...green button forces your dock out of sight, favourites disappear . The whole green button is a massive source of frustration for me as it removes things I need from my screen.

Clicking the green full-screen button expands Safari's window to full-screen mode to focus on the user content. You can also enter full-screen mode by pressing the Command-Control-F keys. The menu bar and Dock are automatically hidden by default. The menu bar is available and will reappear when the cursor is moved to the top of the screen, and the Dock will reappear when it is moved to the bottom.

Since the tab bar can't be hidden when a window has multiple tabs, take advantage of full-screen mode by opening content in its own window. By the same reasoning, hide the Favorites bar by pressing the Command-Shift-B keys, or selecting View > Hide Favorites Bar from Safari's menu bar. Use the same key combination or menu selection to show it again.

Be aware that if you hide Safari's toolbar prior to entering full-screen mode, selected by choosing View > Hide Toolbar from Safari's menu bar, it will remain unavailable until you exit to return to the standard view and select View > Show Toolbar.

If full-screen mode is inappropriate for your use case, don't use it. To maximize Safari's window to fill the visible content, click the green button while holding down the Option key. The green button will change its symbol from two opposing triangles, indicating full-screen mode is available, to a plus sign, indicating zoom mode is available. You can also zoom the window by double-clicking the window's title bar, or choosing Window > Zoom from Safari's menu bar. The keyboard shortcut is Command-Option-F.

Full-screen and zoom buttons:

While in standard view with the toolbar, Favorites bar, and Dock visible and available, you can hide them at any time with either a keyboard shortcut or by selecting the appropriate menu item. For instance, to hide or show the Dock press the Command-Option-D keys. The Dock can also be hidden by right-clicking or Option-clicking on the Dock separator and selecting "Turn Hiding On."

If you wish to change the green button's zoom behavior when holding down the Option key to click it, from the window expanding to fill the visible content to expanding to fill the usable dimensions of the Desktop (i.e. maximized), you can turn to third-party apps such as Spectacle, BetterTouchTool, or Moom. Moom has a visible control overlay that appears when hovering the cursor over the green button.

Maximize the window (Moom):

Return to previous window dimensions (Moom):

OS X Yosemite: Take apps full screen

OS X Yosemite: Window basics

As outlined in Apple's What's New in Safari, the upcoming OS X 10.11 El Capitan will include a feature accessed from Safari's Develop menu, Responsive Design Mode, that "provides a fast-switching layout preview of your webpage across a spectrum of viewport sizes".

Yet another in the endless outpouring of Apple's rigidly left-brained lands of the tunnel visioned geniuses.

There are some folks that create sites that have combined responsive and relative layouts. Being able to switch between rigidly defined sizes without being able to seeing the flow during resizing is of little use. Among other things, it provides feedback on object widths for carefully dialing in the relative position. This is certainly true of narrow screen widths where there is so little tolerance.

I will now have to switch my web design app to Firefox for previews. (It amazes me how bright Apple can be while also being so dumb.)