html - 浏览器不能缩放到 400 像素以下？

Question

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

当我在手机上打开网站时，它在 320 像素左右看起来很完美，所以我知道它的缩放比例确实低于 400 像素。

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

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

-edit- 另外我不确定这是否重要，但 Opera 允许它缩小到几乎没有……所以它适用于 Opera，而不适用于 Chrome 或 FF……有什么想法吗？

score 269 · Accepted Answer

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

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

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

垂直面板布局设置

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

检查器停靠在右侧，具有垂直面板布局

如果您想更进一步查看网络检查器设置（齿轮图标，右下角），然后转到用户代理选项卡。您可以在此处将屏幕分辨率设置为您喜欢的任何内容，甚至可以在纵向和横向之间快速切换。

设备分辨率设置

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

score 36 · Accepted Answer

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

更新：2013 年 7 月 14 日

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

score 24 · Accepted Answer

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

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

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

score 21 · Accepted Answer

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

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

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

score 11 · Accepted Answer

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

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

Chrome 仿真图标

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

在此处输入图像描述

score 8 · Accepted Answer

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

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

score 5 · Accepted Answer

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

score 3 · Accepted Answer

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

-> 将地址栏（输入网址的位置）调整为最大宽度（将右边缘的栏向右拖动）

或禁用图标

score 3 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

激活后，您可以访问一堆非常强大的开发人员工具。此工具之一是视口调整，可用于测试您的网站响应式布局。要激活响应式布局测试，可以使用快捷键Command++ 激活 safari 视口调整选项Ctrl。R这将使您有足够的控制权来在各种视口大小上测试您的网站。

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

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

score 0 · Accepted Answer

我总是遇到固定标签的问题。如果有的话，Chrome 不会将大小调整到低于八个可见固定标签的水平宽度！只需分离要调整大小的选项卡即可解决此问题...

score 0 · Accepted Answer

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

score -4 · Accepted Answer

许多智能手机使用缩放来缩放页面以适应其屏幕尺寸。您的最小页面宽度可能是 400 像素。没有任何示例代码，我认为这就是所有可以说的。

html - 浏览器不能缩放到 400 像素以下？

17 回答 17

Related

Reference