浏览器无法缩放至 400 像素以下？
我正在努力构建一个液体样式表，它的效果非常好。我注意到的一件事是，Chrome 中的浏览器窗口大小不会调整到 400 像素以下，它只会卡在那里，而在 FF 中，当我缩小它时，它只会停在 400 像素左右，然后弹出一个水平滚动条。
当我在手机上打开该网站时，它在 320 像素左右看起来很完美，所以我知道它的缩放比例确实低于 400 像素。
我很好奇是否有人知道这是否是浏览器/桌面的问题，或者我是否应该查看 CSS 之外的其他内容。我没有任何最小宽度声明，所以我不确定是什么原因导致的。
再次在桌面上，它缩小到大约 400 像素的最小宽度并停止，但是当我在手机上打开它时，它会缩放到手机屏幕的大小，大约 320 像素......很好奇为什么至少它赢了桌面上不要缩小到 320px。
-编辑- 另外我不确定这是否重要，但 Opera 允许它缩小到几乎没有...所以它适用于 Opera 而不是 Chrome 或 FF...有什么想法吗？
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.
When I open the site on my phone it looks perfect at around 320px, so I know it does scale lower than 400px.
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.
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.
-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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（17）
Chrome 无法将水平调整大小低于 400 像素 (OS X) 或 218 像素 (Windows)，但我有一个非常简单的解决方案：
更新： Chrome 现在允许您在停靠到时垂直排列检查器窗口对了！这确实改善了布局。
HTML 和 CSS 面板非常适合，您甚至还可以打开一个小的控制台面板。
这让我完全从 Firefox/Firebug 迁移到 Chrome。
如果您想进一步查看网络检查器设置< /strong>（齿轮图标，右下角），然后转到用户代理选项卡。您可以在此处将屏幕分辨率设置为您喜欢的任何分辨率，甚至可以在纵向和横向之间快速切换。
更新：这是我遇到的另一个非常酷的工具。 http://lab.maltewassermann.com/viewport-resizer/
Chrome cannot resize horizontally below 400px (OS X) or 218px (Windows) but I have a really simple solution to the problem:
Update: Chrome now allows you to arrange the inspector windows vertically when docked to the right! This really improves the layout.
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.
If you want to go a step further look at the web inspector settings (cog icon, bottom-right), and goto the user agent tab. You can set the screen resolution to whatever you like here and even quickly toggle between portrait and landscape.
UPDATE: Here is another really cool tool I've come across. http://lab.maltewassermann.com/viewport-resizer/
这可能是因为您在浏览器上安装了插件。从工具栏中删除或隐藏所有插件图标并尝试调整大小。当有插件时，浏览器仅调整地址栏大小并保持插件可见。
更新：2013年7月14日
使用最新的 chrome 版本，现在您可以调整地址栏的大小，并且它会自动隐藏插件。
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
With the latest chrome version, now you can re-size the address bar and it will hide the addons automatically.
我也被难住了，但最终得到了一个简单的解决方案。我刚刚创建了一个 HTML 文件，其中包含打开新窗口的链接：
这个新窗口除了地址栏之外什么都没有，Chrome 允许我自由地将其大小调整为 111x80。
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:
This new window has nothing but the address bar and Chrome lets me freely resize this down to 111x80.
nayan9 的解决方案效果很好，并且可以放入书签，而无需创建 html 文件。在 Chrome 中，使用 URL 创建一个新书签：
并将其命名为“打开小窗口”或类似名称。这将允许您在 Chrome 中轻松打开窗口，而不受大小限制。请注意，仅将其复制到地址栏中是行不通的 - chrome 会去掉“javascript:”。
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:
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 现在在其检查器中有一个“模拟”部分，可以通过单击顶部菜单栏中的小电话图标（在放大镜和元素）：
仿真模式允许您将视口大小设置为所有常见的移动设备屏幕尺寸，其中其他不错功能，例如模拟触摸、地理定位甚至加速计输入：
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):
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:
添加到 nayan9 和 Drinkdecaf 所说的内容中，您只需将 document.URL 放入对 window.open 的调用中即可查看您当前在 320 窗口中查看的页面。如果您需要滚动条，您可能需要增加一些宽度。
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.
我很懒，为了让它更容易，让书签询问用户尺寸:-D
I am lazy, to make it even easier, let the bookmarklet ask the user for sizes :-D
与大多数答案发布时相比，Chrome 中的开发工具已经发生了很大的变化。现在解决这个问题的最佳方法是使用 Chrome 内置的模拟器。
要使用模拟器，请打开DevTools（按
F12），然后单击以下图标以切换设备工具栏：这将允许您可以模拟您想要的任何移动设备或视口大小。
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.
To use the emulators open DevTools (press
F12) and then click on the following icon to toggle theDevice Toolbar:This will then allow you to emulate whichever mobile device or viewport size you want to.
在 Chrome 中，右上角的插件图标会导致问题
->将地址栏（您在其中键入网址的位置）调整为最大宽度（将右边缘的栏拖动到右侧）
或禁用图标
in chrome the icons of your addons in the top right corner cause the problem
-> 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
我找到了一个快速解决此问题的方法。
只需在 Chrome 中安装响应式网页设计插件，它就会打开一个没有地址栏和选项卡的单独窗口，该窗口可以缩小到 10 像素或更小。
此处链接：https://chrome.google.com /webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/相关
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.
Link here: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related
我也遇到过类似的问题，只是找到了一个很好的解决方法。打开 chrome 开发工具，左上角有一个小屏幕和 ipad 图标。单击该按钮将打开页面的移动视图。您可以将其设置为预定义的设备或自定义分辨率。实际上非常漂亮。
I've been experiencing similar issues and just found a good work around. Open up your chrome devtools and in the top left, there's a little screen and ipad icon. Click that and it opens a mobile view of your page. You can set it to predefined devices or a custom resolution. Pretty nifty actually.
另一个简单的解决方案是单击 Strg+Shift+N 进入隐身模式。在那里您可以根据需要调整浏览器窗口的大小。
Another easy solution is to click Strg+Shift+N to enter Incognito Mode. There you can resize your Browser window as you like.
我喜欢这个工具，因为它可以让您快速切换，并且还可以针对移动设备尺寸轻松地在纵向/水平之间切换。它还允许您制作个性化的书签，因此如果您经常设计模糊的分辨率，您可以保存它们并使用它们。
我必须使用其中一个工具，因为即使有了上述答案，我也无法将窗口正确缩放到 320，但总体而言，该工具似乎是一个更快的解决方案。
http://lab.maltewassermann.com/viewport-resizer/
I like this tool because it lets you switch quickly and also switches between portrait/horizontal easily for mobile sizes. It also allows you to make a personalized bookmark let, so if you design for obscure resolutions frequently, you can save them and use them.
I had to use one of these tools because even with the above answer I couldn't get my window to scale to 320 properly, this tool seems to be a faster solution overall.
http://lab.maltewassermann.com/viewport-resizer/
我总是遇到固定标签的问题。 Chrome 不会将大小调整到低于八个可见固定选项卡的水平宽度（如果有）！只需分离您想要调整大小的选项卡即可解决此问题...
I'm always running into this issue with pinned tabs. Chrome will not resize below a horizontal width of eight visible pinned tabs if there are any! Just detach the tab that you want to resize to solve this ...
对于Web开发人员来说，为了测试其网站在尺寸小于500px或最小宽度的手机或平板电脑上的响应能力，请使用开发人员工具在小屏幕上进行测试。
要进行测试，请转到开发人员工具并按 ctrl+shift+M 或单击开发人员工具屏幕左上角的设备图标来切换设备模式。如果设备图标为蓝色，则您可以通过更改浏览器窗口来测试网站的响应能力。
For a web developer, in order to test the responsiveness of their website in mobile or tablet whose size is less than 500px or minimum width then use developer tools to test in small screens.
For testing, go to developer tools and press ctrl+shift+M or click the device icon at the top left of the developer tools screen to toggle device mode. If the device icon is in blue colour, then you can test your website responsiveness by changing the browser window.
这是我对 Stack Overflow 社区的第一个贡献，我努力回馈所有使互联网成为如此强大工具的优秀人士。
现在回答：
Safari，有这个很酷的功能。
您需要在首选项中激活 Safari 开发者选项。
在 Safari 中设置首选项以激活开发人员菜单的屏幕截图
激活后，您可以访问一堆非常强大的功能开发者工具。
该工具之一是视口调整，可用于测试您的网站响应式布局。
要激活响应式布局测试，可以使用快捷键 Command+Ctrl+R
激活 Safari 视图端口调整选项。
这将为您提供足够的控制来在各种视图端口大小上测试您的网站。
激活响应式布局测试选项后浏览器窗口外观的屏幕截图。
https://coolestguidesontheplanet.com/safari-web-developer -tools-show-dock-browser-window/
This is my first contribution to the Stack Overflow community, and it is my effort to give back to all you wonderful people who have made internet such a powerful tool.
Now to answer:
Safari, has this cool feature.
You need to activate safari developer option in preferences.
Screenshot of setting up preferences in Safari to activate developer menu
Once activated you can access bunch of very powerful developer tools.
One of this tool is Viewport adjustment which can used to test your website responsive layout.
To activate responsive lay out testing, one can use the shortcut Command+Ctrl+R
to activate safari view port adjustment option.
This will give you enough control to test your website on various view port sizes.
Screen shot of how your browser window will look once responsive layout test option is activated.
https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/
许多智能手机使用缩放来缩放页面以适应屏幕尺寸。您的最小页面宽度可能是 400 像素。没有任何示例代码，我想这就是全部内容。
A lot of smart phones scale the page to fit into their screen size using zooming. Your minimum page width is probably 400px. Without any example code, I think that's all that can be said.