浏览器不能缩放到400px以下吗？

我正在整理一个液体样式表，效果很好。我注意到的一件事是，我在Chrome中的浏览器窗口的大小不会调整到400px以下，它只会卡在此处，而在FF中，当我按比例缩小时，它只会停在400px左右，然后弹出一个水平滚动条。

当我在手机上打开该网站时，它看起来很完美，约为320像素，因此我知道它的比例确实低于400像素。

我很好奇是否有人知道这是浏览器/桌面设备还是我应该查看CSS以外的东西。我没有任何最小宽度声明，所以我不确定是什么原因引起的。

再次在桌面上，它会缩小到最小宽度（约400像素）并停止，但是当我在手机上打开它时，它会缩小到手机屏幕的大小（约320像素）……很好奇为什么至少会赢了不能缩小到桌面上的320px。

-edit-另外，我不确定这是否重要，但是Opera可以将其缩小到几乎没有任何东西...因此它可以在Opera中使用，而不是在Chrome或FF中使用...有什么想法吗？

Chrome无法将其水平调整为低于400px（OS X）或218px（Windows），但是我有一个非常简单的解决方案：

1. 将Web检查器停靠在右侧而不是底部
2. 调整检查器面板的大小 -您现在可以使浏览器区域很小（减小到0px）

更新： Chrome现在可让您在停靠在右侧时垂直排列检查器窗口！这确实改善了布局。

HTML和CSS面板非常合适，您甚至可以打开一个小的控制台面板。这使我可以完全从Firefox / Firebug转到Chrome。

如果要进一步操作，请查看Web检查器设置（齿轮图标，右下角），然后转到“ 用户代理”选项卡。您可以在此处将屏幕分辨率设置为任意值，甚至可以在纵向和横向之间快速切换。

更新：这是我遇到的另一个非常酷的工具。http://lab.maltewassermann.com/viewport-resizer/

这可能是由于您在浏览器中安装了插件。从工具栏中删除或隐藏所有插件图标，然后尝试调整大小。当存在插件时，浏览器仅调整地址栏的大小并保持插件可见。

更新：2013年7月14日

使用最新的chrome版本，现在您可以重新调整地址栏的大小，它将自动隐藏插件。

我也很沮丧，但最终得到了一个简单的解决方案。我刚刚创建了一个带有打开新窗口的链接的HTML文件：

<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>

这个新窗口只有地址栏，Chrome浏览器让我可以自由地将其调整为111x80。

nayan9的解决方案效果很好，无需创建html文件就可以放入书签中。在Chrome中，使用URL创建一个新书签：

javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();

并为其命名为“打开小窗口”或类似名称。这将使您可以轻松打开chrome中不受大小限制的窗口。请注意，仅将其复制到您的地址栏中是行不通的-chrome会删除“ javascript：”。

如果您想减小屏幕宽度以模拟不同的设备（以及为什么还要这样做？）：

Chrome现在在其检查器中有一个“仿真”部分，可通过单击顶部菜单栏中（放大镜和Elements之间）的小电话图标来激活：

通过仿真模式，您可以将视口尺寸设置为所有常见的移动屏幕尺寸，以及其他不错的功能，例如仿真触摸，地理位置甚至加速度计输入：

除了nayan9和Drinkdecaf所说的以外，您只需将document.URL放入对window.open的调用中，即可在320窗口中查看当前正在查看的页面。如果希望使用滚动条，则可能需要在宽度上添加更多内容。

javascript:(function(){window.open(document.URL, '','width=320,height=480');})();

从发布大多数答案开始，Chrome中的DevTools已经有了实质性的发展。现在解决此问题的最佳方法是使用Chrome内置的模拟器。

要使用仿真器，请打开DevTools（按F12），然后单击以下图标来​​切换Device Toolbar：

然后，这将允许您模拟所需的任何移动设备或视口大小。

在Chrome中，您的插件图标在右上角会导致问题

->将地址栏（您在其中输入网址）的大小调整为最大宽度（将右侧的栏拖到右侧）

或禁用图标

我很懒，为了简化操作，让小书签询问用户尺寸：-D

javascript: (function() {var width = prompt('Enter window width:', '320');var height = prompt('Enter window height:','480');var url = prompt('Enter window URL');if (url.indexOf(':') < 0) {url = 'http://'+url;} window.open(url, '','width='+width+',height='+height);})()

我找到了一个快速的解决方法。

只需在Chrome上安装响应式Web设计插件，它就会打开一个单独的窗口，其中没有地址栏和标签，这些标签可以缩小到10像素或更小。

此处链接：https : //chrome.google.com/webstore/detail/response-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related

我遇到了类似的问题，并且找到了一个很好的解决方法。打开您的chrome devtools，在左上方，有一个小屏幕和ipad图标。单击该按钮，它将打开您页面的移动视图。您可以将其设置为预定义的设备或自定义分辨率。实际上很漂亮。

另一个简单的解决方案是单击Strg + Shift + N进入隐身模式。在这里，您可以根据需要调整浏览器窗口的大小。

我喜欢这个工具，因为它可以让您快速切换，还可以轻松地在纵向/横向之间切换以适应移动尺寸。它还允许您制作个性化的书签让，因此，如果您经常为晦涩的分辨率进行设计，则可以保存并使用它们。

我必须使用这些工具之一，因为即使有了以上答案，我也无法将窗口正确缩放到320，但该工具似乎是整体上更快的解决方案。

http://lab.maltewassermann.com/viewport-resizer/

我一直在使用固定标签来解决这个问题。如果有的话，Chrome不会在八个可见固定标签的水平宽度以下调整大小！只需分离您要调整大小的选项卡即可解决此问题...

这是我对stackoverflow社区的第一项贡献，也是我的努力，以回馈所有使Internet成为如此强大工具的出色人员。现在来回答：Safari，有这个很酷的功能。您需要在首选项中激活Safari开发者选项。 在Safari中设置首选项以激活开发者菜单的屏幕截图

激活后，您可以访问许多非常强大的开发人员工具。此工具之一是视口调整，可用于测试您的网站响应式布局。要激活响应式布局测试，可以使用快捷键Cmd + ctr + R激活Safari浏览器视口调整选项。这将为您提供足够的控制权，以在各种查看端口大小上测试您的网站。

响应式布局测试选项被激活后，浏览器窗口外观的屏幕截图。

1. 链接到如何在Safari中激活开发人员菜单：https： //coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/

许多智能手机使用缩放来缩放页面以适合其屏幕尺寸。您的最小页面宽度可能是400px。没有任何示例代码，我想就是全部。