首页 文章

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

提问于
浏览 次
126

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

当我在手机上打开网站时，它看起来很完美，大约是320px，所以我知道它的比例低于400px .

我很好奇，如果有人知道这是一个浏览器/桌面的东西，还是我应该看看我的CSS以外的东西 . 我没有任何最小宽度声明，所以我不确定是什么原因引起的 .

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

-edit-而且我不确定这是否重要但Opera允许它缩小到几乎没有...所以它适用于Opera而不是Chrome或FF ...任何想法？

html css layout liquid-layout

14 回答

  • 215

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

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

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

    回复于
  • 36

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

    回复于
  • 1

    Chrome cannot resize horizontally below 400px (OS X) or 218px (Windows) 但我有一个非常简单的问题解决方案：

    • Dock the web inspector to the right 而不是底部

    • Resize the inspector panel - 您现在可以使浏览器区域非常小（低至0px）

    Update: Chrome现在允许您在停靠在右侧时垂直排列检查器窗口！这确实改善了布局 .

    vertical panel layout setting

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

    Inspector docked to right with vertical panel layout

    如果您想进一步查看 web inspector settings （cog图标，右下角），并转到 user agent 标签 . 您可以将屏幕分辨率设置为您喜欢的任何内容，甚至可以在纵向和横向之间快速切换 .

    Device resolution settings

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

    回复于
  • 5

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

    Update: 7/14/2013

    With the latest chrome version, now you can re-size the address bar and it will hide the addons automatically.

    回复于
  • 2

    我也很难过，但结果却是一个简单的解决方案 . 我刚刚创建了一个HTML文件，其中包含一个用于打开新窗口的链接：

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

    这个新窗口除了地址栏外什么都没有，Chrome让我可以自由调整大小到111x80 .

    回复于
  • 1

    nayan9的解决方案效果很好，可以放入书签而无需创建html文件 . 在Chrome中，使用网址创建新书签：

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

    并命名为“Open Small Window”或类似名称 . 这样您就可以在chrome中轻松打开没有大小限制的窗口 . 请注意，只是将其复制到您的地址栏中将无效 - chrome将“javascript：”删除 .

    回复于
  • 10

    如果你想减少你的屏幕宽度来模拟不同的设备（为什么你还想这样做？）：

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

    Chrome Emulation icon

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

    enter image description here

    回复于
  • 0

    添加到nayan9和drinkdecaf所说的内容，您可以将document.URL放入对window.open的调用中，以查看您当前在320窗口中查看的页面 . 如果您期望滚动条，可能需要向宽度添加更多内容 .

    javascript:(function(){window.open(document.URL, '','width=320,height=480');})();
    回复于
  • -4

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

    • 将地址栏（您键入的网址）的大小调整为最大宽度（将右边的栏向右拖动）

    或禁用图标

    回复于
  • 0

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

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

    回复于
  • 2

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

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

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

    回复于
  • 14

    Chrome中的DevTools已经大量发布了大部分答案 . 现在解决此问题的最佳方法是使用Chrome内置的模拟器 .

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

    The devtools button

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

    回复于
  • 0

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

    回复于

相关问题