浏览器不能缩放到400px以下？
Bro*_*die 141 html css layout liquid-layout
我正在努力整理一个液体样式表,它很棒.我注意到的一件事是Chrome浏览器中的浏览器窗口不会调整到400px以下它只会卡在那里而在FF中我缩小它只是停在400px左右然后弹出一个水平滚动条.
当我在手机上打开网站时,它看起来很完美,大约是320px,所以我知道它的比例低于400px.
我很好奇,如果有人知道这是一个浏览器/桌面的东西,还是我应该看看我的CSS以外的东西.我没有任何最小宽度声明,所以我不确定是什么原因引起的.
再次在桌面上,它缩小到约400px的最小宽度并停止,但是当我在手机上打开它时,它会扩展到手机屏幕的大小,大约是320px ...好奇为什么至少它赢了在桌面上缩小到320像素.
-edit-而且我不确定这是否重要但Opera允许它缩小到几乎没有...所以它适用于Opera而不是Chrome或FF ...任何想法？
Ois*_*ery 243
Chrome无法在400px(OS X)或218px(Windows)下水平调整大小,但我有一个非常简单的问题解决方案:
- 将Web检查器停靠在右侧而不是底部
- 调整检查器面板的大小 - 您现在可以使浏览器区域非常小(低至0px)
更新: Chrome现在允许您在停靠在右侧时垂直排列检查器窗口!这确实改善了布局.
HTML和CSS面板非常适合您甚至打开一个小型控制台面板.这让我可以完全从Firefox/Firebug转移到Chrome.
如果您想进一步查看Web检查器设置(cog图标,右下角),并转到用户代理选项卡.您可以将屏幕分辨率设置为您喜欢的任何内容,甚至可以在纵向和横向之间快速切换.
更新:这是我遇到的另一个非常酷的工具.http://lab.maltewassermann.com/viewport-resizer/
- 其他人无法弄清楚如何将开发人员工具停靠在正确的位置？http://stackoverflow.com/questions/10023640/how-to-reposition-chrome-developer-tools (5认同)
- IMO这应该是公认的答案.这个想法简单明了,你在指标覆盖之上的提示非常棒.您链接的书签也是如此! (3认同)
- 你是男人 当有适当的大检查器窗口时，调试小屏幕甚至更简单。 (2认同)
- 绝妙的技巧，也可以在Safari中使用！至少在v9.1中 (2认同)
Cha*_*mal 36
这可能是因为您在浏览器上安装了插件.从工具栏中删除或隐藏所有插件图标并尝试重新调整大小.当有插件时,浏览器只调整地址栏的大小并保持插件可见.
更新:2013年7月14日
使用最新的chrome版本,现在您可以重新调整地址栏的大小,它会自动隐藏插件.
- **这不是答案**.即使禁用所有插件/扩展程序,Chrome的最小宽度仍为400px. (31认同)
- **当有插件时,浏览器只会调整地址栏大小并保持插件可见.**希望您理解这一点.这不是插件的副作用.但是当安装了插件时,浏览器无法调整到最小值.因为地址栏旁边的插件图标. (4认同)
- @ChamikaSandamal它不正确.OP试图将他的窗口缩小到400px以下.这在Chrome中是不可能的,因为浏览器的最小宽度为400px.实现OP正在寻找的效果的唯一方法是Sherpanaut的答案.除了帮助用户接近400px的硬最小宽度之外,你的答案绝对没有什么,这不是OP想要的. (4认同)
- 删除Chrome中的所有插件图标并不能解决这个问题.nayan9的解决方案做到了. (2认同)
- @ChamikaSandamal虽然它可能适合你,但它不适合我们其他人.这对你不利.简单来说,这个答案并不能解决我们很多人的问题. (2认同)
小智 17
我也很难过,但结果却是一个简单的解决方案.我刚刚创建了一个HTML文件,其中包含一个用于打开新窗口的链接:
<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>
这个新窗口除了地址栏外什么都没有,Chrome让我可以自由调整大小到111x80.
dri*_*caf 15
nayan9的解决方案效果很好,可以放入书签而无需创建html文件.在Chrome中,使用网址创建新书签:
javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();
并命名为"Open Small Window"或类似名称.这样您就可以在chrome中轻松打开没有大小限制的窗口.请注意,只是将其复制到您的地址栏中将无效 - chrome将"javascript:"删除.
gl0*_*l03 10
如果你想减少你的屏幕宽度来模拟不同的设备(为什么你还想这样做？):
Chrome现在在其检查器中有一个Emulation部分,通过单击顶部菜单栏中的小电话图标(放大镜和Elements之间)激活:
仿真模式允许您将视口大小设置为所有常见的移动屏幕大小,以及其他不错的功能,如模拟触摸,地理位置甚至加速计输入:
添加到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);})()