Set Minimum width to 320px on Mac OSX

Is it possible to set a min width for an OSX window to 320px?

The default min width in Safari is greater than this which makes it difficult to program with media queries and replicate on OSX. Please see my screenshot, which will make things clearer.

Incident开发者_Go百科ally if you are going to post techy answers (I assume someone will) please bear in mind I have no experience with backend code, the most I know is CSS / PHP / JS. I don't mind getting my hands dirty, but the instructions need to be verbose :-)

Taken from This Link - worked for me in both chrome and safari on OS X

var location = 'http://www.my-app-address.com'
javascript:open(location,'iPhone:portrait','innerWidth='+(320+15)+',innerHeight='+(480+15)+',scrollbars=yes');

and for landscape:

javascript:open(location,'iPhone:landscape','innerWidth='+(480+15)+',innerHeight='+(320+15)+',scrollbars=yes');

In Safari, you can install an extension called 'Resizer' and you have the option of putting in custom sizes.

The funny thing is, once you use Resizer to change the window size, it can then be resized by hand to any size you want. It is almost like using Resizer unlocks the window.

I've created a chrome extension,OSX Resizer, that makes a 320px pop-up of the current window.

Basically the same as Rubinsh's solution, but code free.

The Resizer extension that drummin mentions does not provide this behavior for me.

This can be emulated through Chrome Dev Tools now.

Open Inspector, click the gear on the bottom right, and goto the 'Overrides' tab.

You can even spoof your user agent :)

If your goal is to see how sites will look on an iPhone, you can always download Xcode for free from the Mac App Store, which includes the iOS Simulator.

Alternatively, if you have an iPhone (I assume you do if you're developing sites for it), iOS 6 includes a remote debugging feature that lets you use the Web Inspector on your Mac to inspect and edit a site loaded on your iPhone.