Question

我正在努力整理一个流畅的样式表，它很棒。我注意到的一件事是Chrome浏览器中的浏览器窗口不会调整到400px以下它只会卡在那里而在FF中我缩小它只会停在400px左右然后弹出一个水平滚动条。

当我在手机上打开网站时，它看起来很完美，大约320px，所以我知道它的比例低于400px。

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

再次在桌面上它缩小到约400px的最小宽度并停止，但是当我在手机上打开它时，它会扩展到手机屏幕的大小，大约是320px ...好奇为什么在这个至少它不会缩小到桌面上的320px。

CNC中此外，我不确定这是否重要，但Opera允许它缩小到几乎没有...所以它适用于Opera而不是Chrome或FF ...任何想法？

Answer 1

Chrome无法在400px（OS X）或218px（Windows）以下水平调整大小，但我有一个非常简单的问题解决方案：

将网络检查器停靠在右侧而不是底部
调整检查器面板的大小 - 您现在可以使浏览器区域非常小（低至0px）

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

vertical panel layout setting

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

Inspector docked to right with vertical panel layout

如果您想进一步查看网络检查员设置（cog图标，右下角），并转到用户代理标签。您可以将屏幕分辨率设置为您喜欢的任何内容，甚至可以在纵向和横向之间快速切换。

Device resolution settings

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

Answer 2

这可能是因为您在浏览器上安装了插件。从工具栏中删除或隐藏所有插件图标并尝试重新调整大小。当有插件时，浏览器只调整地址栏的大小并保持插件可见。

更新：2013年7月14日

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

Answer 3

我也很难过，但结果却是一个简单的解决方案。我刚刚创建了一个HTML文件，其中包含一个用于打开新窗口的链接：

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

这个新窗口除了地址栏外什么都没有，Chrome让我可以自由调整大小到111x80。

Answer 4

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

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

并命名为“Open Small Window”或类似名称。这样您就可以在chrome中轻松打开没有大小限制的窗口。请注意，只是将其复制到地址栏中将无效 - chrome会将“javascript：”删除。

Answer 5

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

Chrome现在在其检查器中有一个“模拟”部分，通过单击顶部菜单栏中的小手机图标（放大镜和元素之间）激活：

Chrome Emulation icon

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

enter image description here

Answer 6

添加到nayan9和drinkdecaf所说的内容，您可以将document.URL放入对window.open的调用中，以查看您当前在320窗口中查看的页面。如果您需要滚动条，可能需要在宽度上添加更多内容。

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

Answer 7

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

- ＆GT;将地址栏（您键入的网址）的大小调整为最大宽度（将右边的栏向右拖动）

或禁用图标

Answer 8

我很懒，为了让它更容易，让书签向用户询问尺寸:-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);})()

Answer 9

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

Answer 10

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

Answer 11

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

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

链接在这里：https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related

Answer 12

对于Web开发人员，要在大小小于500像素或最小宽度的移动设备或平板电脑中测试其网站的响应能力，请使用开发人员工具在小屏幕上进行测试。要进行测试，请转到开发人员工具，然后按ctrl + shift + M或单击开发人员工具屏幕左上方的设备图标以切换设备模式。如果设备图标为蓝色，则可以通过更改浏览器窗口来测试网站的响应能力。

Answer 13

这是我对Stack Overflow社区的第一项贡献，也是我的努力，以回馈所有使Internet成为如此强大工具的出色人们。
现在回答：
Safari，具有这项很酷的功能。您需要在首选项中激活Safari开发者选项。 Screenshot of setting up preferences in Safari to activate developer menu

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

Screen shot of how your browser window will look once responsive layout test option is activated.