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

我正在组装一个流动样式表，效果非常好。我注意到我的 Chrome 浏览器窗口不会调整到400px 以下，当我调整到400px 左右，它就会卡在那里，然后在 FF 中，它就会停在400px 左右，然后弹出一个水平滚动条。

当我打开我的手机上的网站，它看起来在320像素左右完美，所以我知道它的规模低于400像素。

我很好奇，如果有人知道这是一个浏览器/桌面的东西，或者如果我应该看看我的 CSS 以外的东西。我没有任何最小宽度声明，所以我不确定是什么原因导致了这种情况。

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

- 编辑- 我也不知道这是否重要，但 Opera 允许它缩小到几乎没有... ... 所以它可以在 Opera 上工作，而不是在 Chrome 或 FF... ... 有什么想法吗？

81597 次浏览
小开

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

更新: 2013年7月14日

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

小开

许多智能手机使用缩放来缩放页面以适应其屏幕大小。您的最小页面宽度可能是400px。在没有任何示例代码的情况下，我认为这就是所能说的全部内容。

小开

在铬的图标，你的插件在右上角造成的问题

> 调整地址栏的大小(在这里输入 url)到最大宽度(将地址栏的右边缘拖到右边)

或者关闭图标

小开

我也被难住了，但是最终我得到了一个简单的解决方案。我刚刚创建了一个 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 删除“ javascript:”了。

小开
最佳答案

Chrome 不能水平调整大小低于400px (OS X)或218px (Windows) ，但我有一个非常简单的解决方案:

  1. 将网页检查器停靠在右边 而不是底部
  2. 调整检查器面板的大小 ——现在你可以让浏览器的面积变得非常小(下降到0px)

更新: Chrome 现在允许你在停靠在右侧时垂直排列检查窗口！这真的改善了布局。

vertical panel layout setting

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

Inspector docked to right with vertical panel layout

如果您想进一步查看 网页检视器设定(齿轮图标，右下角) ，然后转到 用户代理选项卡。您可以设置屏幕分辨率为任何您喜欢在这里，甚至快速切换之间的肖像和横向。

Device resolution settings

更新 : 这是我遇到的另一个非常酷的工具。 < a href = “ http://lab.maltewassermann.com/viewport-resizer/”rel = “ noReferrer”> http://lab.maltewassermann.com/viewport-resizer/

小开

除了 nayan9和 drinkdecaf 所说的内容之外，您还可以将 document.URL 添加到对 window.open 的调用中，以查看当前在320窗口中查看的页面。如果您想要一个滚动条，那么您可能需要在宽度上添加一些内容。

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

我很懒，为了让它更容易，让书签小工具询问用户的大小:-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);})()
小开

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

小开

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

我不得不使用其中的一个工具，因为即使有上面的答案，我也不能让我的窗口正确地缩放到320，这个工具似乎是一个更快的解决方案。

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

小开

如果您想减小屏幕宽度以模拟不同的设备(还有为什么要这样做?):

Chrome 现在在它的检查器中有一个模拟部分，通过点击顶部菜单栏(在放大镜和元素之间)中的小手机图标来激活:

Chrome Emulation icon

仿真模式允许你设置视窗大小为所有常见的移动屏幕大小，在其他很好的功能，如仿真触摸，地理定位，甚至加速器输入:

enter image description here

小开

我总是遇到这个问题与固定标签。如果有8个可见的固定标签，Chrome 不会调整水平宽度以下的大小！只需分离要调整大小的选项卡来解决这个问题..。

小开

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

只要安装这个响应式网页设计插件到 Chrome，它就会打开一个没有地址栏和标签页的单独窗口，可以缩放到10px 或更小。

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

小开

Chrome 中的 DevTools 已经从大多数答案发布的时候有了很大的进步。现在解决这个问题的最好方法是使用内置在 Chrome 中的模拟器。

使用模拟器打开 DevTools(按 F12) ，然后点击下面的图标来切换 Device Toolbar:

The devtools button

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

小开

我也遇到过类似的问题，只是找到了一个很好的解决办法。打开您的 chrome devtools，在左上角，有一个小屏幕和 ipad 图标。点击它，它就会打开你页面的移动视图。可以将其设置为预定义设备或自定义分辨率。其实还不错。

小开

这是我对 Stack Overflow 社区的第一个贡献，也是我努力回馈给所有让互联网成为如此强大工具的优秀人士。
现在回答:
Safari 有一个很酷的功能。 您需要在首选项中激活 safari 开发人员选项。 在 Safari 中设置首选项以激活开发人员菜单的屏幕截图

一旦激活，您可以访问一批非常强大的开发人员工具。 这个工具之一是视图调整，可以用来测试您的网站响应布局。 要激活响应布局测试，可以使用快捷 Command + Ctrl + R 激活 Safari 视图端口调整选项。 这将给你足够的控制，以测试你的网站在不同的视图端口大小。

一旦响应布局测试选项被激活，浏览器窗口的外观截图。

  1. 链接到如何激活 Safari 中的开发者菜单: Https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/
小开

对于一个网页开发者来说，为了测试他们的网站在手机或者平板电脑上的响应能力，如果它们的大小小于500像素或者最小宽度，那么可以使用开发者工具在小屏幕上进行测试。 对于测试，转到开发人员工具并按下 ctrl + shift + M 或者单击开发人员工具屏幕左上角的设备图标来切换设备模式。如果设备图标是蓝色的，那么你可以通过改变浏览器窗口来测试你的网站响应能力。


提交答案