在Mac OSX上设置最小宽度为320像素

Question

是否可以为OSX窗口设置最小宽度为320像素？

Safari的默认最小宽度大于此值，这使得使用媒体查询进行编程并在OSX上复制变得困难。请参见我的屏幕截图，这将使事情更清晰。

顺便说一句，如果您要发布技术答案（我认为会有人这样做），请记住我没有后端代码方面的经验，我所知道的最多只有CSS / PHP / JS。我不介意动手解决问题，但说明需要详细易懂。

- SparrwHawk

---

你的意思是：如果将最小宽度设置为320像素，仍然无法将窗口调整为320像素吗？（Safari强制使用更大的宽度？） - Matthieu Napoli

我刚刚尝试了Chrome，行为完全相同。 - Zepplock

是的，那就是我的意思。我相信我仍然可以想象出设计会是什么样子，只是很烦人我不能将它设置为320像素，与iPhone相同。 - SparrwHawk

Answer 1

摘自这个链接 - 在我使用的OS X上，无论是Chrome还是Safari都有效。

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

对于横屏：

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

- Rubinsh

---

非常好，谢谢！如果滚动条默认隐藏，则删除+15更好。 - Amy

Answer 2

我创建了一个Chrome扩展OSX Resizer，它可以使当前窗口弹出一个320像素的弹出窗口。

基本上与Rubinsh的解决方案相同，但无需编写代码。

Drummin提到的Resizer扩展程序对我来说没有提供这种行为。

- Dane Macaulay

Answer 3

在Safari中，您可以安装一个名为“Resizer”的扩展程序，并且您可以选择输入自定义大小。

有趣的是，一旦您使用Resizer更改窗口大小，它就可以手动调整到任何您想要的大小。这就像使用Resizer解锁了窗口一样。

- StephenCollins

---

嘿，Drummin，这确实很有用。然而，不幸的是它并不完全符合我的工作流需求 - 我使用Espresso 2进行实时CSS预览，虽然它使用安装的Safari引擎来呈现预览，但显然它没有扩展生态系统。到目前为止，我发现最好的方法是使用内置的iOS模拟器和LiveReload.com的组合来生成刷新。我已经要求开发人员研究这个问题，但还是感谢你的建议。 - SparrwHawk

Answer 4

现在可以通过Chrome Dev Tools进行模拟。

打开检查器，点击右下角的齿轮，进入“覆盖”选项卡。

你甚至可以伪造你的用户代理 :)

- Dane Macaulay

Answer 5

如果您的目标是查看网站在iPhone上的外观，您可以从Mac App Store免费下载Xcode，其中包括iOS模拟器。

或者，如果您有一部iPhone（我假设您正在为其开发网站），iOS 6包括一个远程调试功能，让您使用Mac上的Web检查器来检查和编辑加载在您的iPhone上的网站。

- daGUY