Set the minimum width to 320 pixels on Mac OSX

Question

Can I set the minimum width for an OSX window to 320 pixels?

The default minimum width in Safari is greater than this, making it difficult to program media queries and replicate on OSX. See my screenshot, which will become more clear.

By the way, if you are going to send technical answers (I assume that someone will be), please keep in mind that I have no experience with the backend code, the more I know CSS / PHP / JS. I do not mind that my hands are dirty, but the instructions should be detailed :-)

Answer 1

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

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'); 

Answer 2

In Safari, you can install an extension called "Resizer", and you have the option to set custom sizes.

The funny thing is that after you use Resizer to resize the window, you can manually resize it to whatever size you want. It is like Resizer is opening a window.

Answer 3

I created a chrome extension, OSX Resizer , which makes a 320px popup of the current window.

Basically the same as a Rubinsh solution, but without code.

The Resizer extension that drummin mentions doesn't give me that kind of behavior.

Answer 4

Now it can be emulated using Chrome Dev tools.

Open the Inspector, click the gear in the lower right corner and go to the Overrides tab.

You can even fool your agent :)

Answer 5

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

Alternatively, if you have an iPhone (I assume you do this if you develop sites for it), iOS 6 includes remote debugging that allows you to use the web inspector on your Mac to check and edit the site loaded on your iPhone.