Html 浏览器不能缩放到 400 像素以下？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8681903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Browser doesn't scale below 400px?
提问by Brodie
I'm working on putting together a liquid style-sheet and it works wonderful. One thing that I've noticed is that my browser window in Chrome won't resize below 400px it just gets stuck there and in FF as I scale down it it just stops at around 400px and then pops a horizontal scroll bar.
我正在制作一个流动的样式表，效果很好。我注意到的一件事是，我在 Chrome 中的浏览器窗口不会调整到 400 像素以下，它只会卡在那里，而在 FF 中，当我缩小它时，它只会停在 400 像素左右，然后弹出一个水平滚动条。
When I open the site on my phone it looks perfect at around 320px, so I know it does scale lower than 400px.
当我在手机上打开网站时，它在 320 像素左右看起来很完美，所以我知道它的比例确实低于 400 像素。
I was curious if anyone knew if this was a browser/desktop thing or if I should be looking at something other than my CSS. I don't have any min-width declarations so i'm not sure what could be causing this.
我很好奇是否有人知道这是否是浏览器/桌面的东西，或者我是否应该查看 CSS 以外的东西。我没有任何最小宽度声明，所以我不确定是什么导致了这种情况。
Again on desktop it scales down to a min-width of about 400px and stops, but when I open it up on my phone it scales to the size of the phone screen which is roughly 320px... curious why at the very least it won't scale down to the 320px on desktop.
再次在桌面上，它缩小到大约 400 像素的最小宽度并停止，但是当我在手机上打开它时，它会缩放到大约 320 像素的手机屏幕大小......好奇为什么至少它赢了在桌面上不会缩小到 320 像素。
-edit- Also I'm not sure if this matters but Opera allows it to scale down to pretty much nothing... So it works with Opera and not in Chrome or FF... any ideas?
-edit- 另外，我不确定这是否重要，但 Opera 允许它缩小到几乎没有……所以它适用于 Opera 而不是 Chrome 或 FF ……有什么想法吗？
回答by Oisin Lavery
Chrome cannot resize horizontally below 400px (OS X) or 218px (Windows)but I have a really simple solution to the problem:
Chrome 无法在 400 像素（OS X）或 218 像素（Windows）以下水平调整大小，但我有一个非常简单的解决方案：
- Dock the web inspector to the rightinstead of to the bottom
- Resize the inspector panel- you can now make the browser area really small (down to 0px)
- 将 Web 检查器停靠在右侧而不是底部
- 调整检查器面板的大小- 您现在可以使浏览器区域非常小（低至 0px）
Update:Chrome now allows you to arrange the inspector windows vertically when docked to the right! This really improves the layout.
更新：Chrome 现在允许您在停靠在右侧时垂直排列检查器窗口！这确实改善了布局。
The HTML and CSS panels fit really well and you even open a small console panel too. This has allowed me to completely move from Firefox/Firebug to Chrome.
HTML 和 CSS 面板非常适合，您甚至还可以打开一个小的控制台面板。这让我可以完全从 Firefox/Firebug 转移到 Chrome。
If you want to go a step further look at the web inspector settings(cog icon, bottom-right), and goto the user agenttab. You can set the screen resolution to whatever you like here and even quickly toggle between portrait and landscape.
如果您想进一步查看Web 检查器设置（齿轮图标，右下角），然后转到用户代理选项卡。您可以在此处将屏幕分辨率设置为您喜欢的任何值，甚至可以在纵向和横向之间快速切换。
UPDATE: Here is another really cool tool I've come across. http://lab.maltewassermann.com/viewport-resizer/
更新：这是我遇到的另一个非常酷的工具。http://lab.maltewassermann.com/viewport-resizer/
回答by Chamika Sandamal
this may be because of the addons you installed on your browser. remove or hide all addon icons from the tool bar and try re size. when there are addons browser only resize the address bar and keeps the addons visible.
这可能是因为您在浏览器上安装了插件。从工具栏中删除或隐藏所有插件图标并尝试重新调整大小。当有插件时，浏览器只调整地址栏的大小并保持插件可见。
Update: 7/14/2013
更新：2013 年 7 月 14 日
With the latest chrome version, now you can re-size the address bar and it will hide the addons automatically.
使用最新的 chrome 版本，现在您可以重新调整地址栏的大小，它会自动隐藏插件。
回答by nayan9
I was stumped as well but ended up with a simple solution. I just created a HTML file with a link to open a new window:
我也被难住了，但最终得到了一个简单的解决方案。我刚刚创建了一个带有打开新窗口链接的 HTML 文件：
<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>
This new window has nothing but the address bar and Chrome lets me freely resize this down to 111x80.
这个新窗口只有地址栏，Chrome 让我可以自由地将其调整为 111x80。
回答by drinkdecaf
nayan9's solution works great, and can be put into a bookmark without having to create a html file. In Chrome, create a new bookmark with URL:
nayan9 的解决方案效果很好，可以放入书签而无需创建 html 文件。在 Chrome 中，使用 URL 创建一个新书签：
javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();
And give it a name of "Open Small Window" or something similar. This will allow you to easily open windows without size restrictions within chrome. Note that just copying this into your address bar won't work - chrome strips the "javascript:" out.
并为其命名为“打开小窗口”或类似名称。这将允许您轻松打开窗口而不受 chrome 的大小限制。请注意，仅将其复制到您的地址栏中是行不通的 - chrome 会将“javascript:”去掉。
回答by gl03
In case you want to reduce your screen width to emulate different devices (and why else would you want to do this?):
如果您想减小屏幕宽度以模拟不同的设备（以及为什么要这样做？）：
Chrome now has an Emulation section in its inspector, activated by clicking the little phone icon in the top menubar (between the magnifying glass and Elements):
Chrome 现在在其检查器中有一个 Emulation 部分，通过单击顶部菜单栏中的小电话图标（在放大镜和 Elements 之间）激活：
Emulation mode allows you to set the viewport size to all common mobile screen sizes, among other nice features, like emulating touch, geolocation and even accelerometer input:
模拟模式允许您将视口大小设置为所有常见的移动屏幕大小，以及其他不错的功能，例如模拟触摸、地理定位甚至加速度计输入：
回答by nils
Adding to what nayan9 and drinkdecaf said, you can just throw document.URL into the call to window.open to see the page you're currently viewing in the 320 window. You might want to add some more to the width if you're expecting a scrollbar.
再加上nayan9 和drinkdecaf 所说的，您可以将document.URL 放入对window.open 的调用中，以查看您当前在320 窗口中查看的页面。如果您需要滚动条，您可能希望在宽度上增加一些。
javascript:(function(){window.open(document.URL, '','width=320,height=480');})();
回答by Mike Poole
The DevTools in Chrome have moved on substantially from when most of these answers were posted. The best way to address this issue now is to use the emulators that are built into Chrome.
Chrome 中的 DevTools 已经从发布这些答案中的大部分内容开始有了实质性的进展。现在解决此问题的最佳方法是使用 Chrome 内置的模拟器。
To use the emulators open DevTools(press F12) and then click on the following icon to toggle the Device Toolbar:
要使用模拟器，请打开DevTools（按F12），然后单击以下图标以切换Device Toolbar：
This will then allow you to emulate whichever mobile device or viewport size you want to.
这将允许您模拟您想要的任何移动设备或视口大小。
回答by Tamer Güner
in chrome the icons of your addons in the top right corner cause the problem
在 chrome 中，右上角的插件图标会导致问题
-> resize the adress-bar (where you type the urls) to maximum width (drag the bar at the right edge to the right)
-> 将地址栏（您输入网址的位置）调整为最大宽度（将右边缘的栏向右拖动）
or disable the icons
或禁用图标
回答by Rob Boerman
I am lazy, to make it even easier, let the bookmarklet ask the user for sizes :-D
我很懒，为了让它更容易，让书签向用户询问尺寸：-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);})()
回答by Aniket Sengar
I found a quick workaround for this.
我找到了一个快速解决方法。
Just install the Responsive Web Design Add-on to Chrome, and it will open a separate window without the address bar and tabs, which can be scaled down to 10 px or less.
只需将 Responsive Web Design Add-on 安装到 Chrome，它就会打开一个单独的窗口，没有地址栏和选项卡，可以缩小到 10 像素或更小。
链接在这里：https: //chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related
