css - 无论视口缩小多小，如何强制网页以最小分辨率呈现？

Question

我对复杂的 CSS 相当陌生，并且有一个问题——我有一个页面，它在页面底部放置了一个浮动元素。它通过设置底部：0 和位置：绝对来实现。

当用户将浏览器调整为非常小的尺寸时，此元素会覆盖页面上的其他内容。

理想情况下，该元素将继续以正常和大尺寸浮动在浏览器底部，但如果浏览器窗口缩小得太小，浏览器将强制滚动条，而不是进一步移动浮动元素。

本质上，我想告诉浏览器——无论窗口多小，永远不要渲染小于 800x600 的页面。

Answer 1

你可以设置html, body { min-width: 800px; min-height: 600px; }

YMMV 在不同的浏览器中。

Answer 2

这实际上取决于浮动页脚是否需要始终可见，或者当浏览器窗口很小时它是否可以滚动到底部。

我认为一些 javascript 可能比 css 解决方案更容易管理。请记住，min-width 和 min-height 并非在所有浏览器中都有效。

您可以使用 jquery 使这更容易。$(window).resize( callback ) 可用于设置回调函数来处理窗口大小调整。

我也将窗口尺寸用作调整大小代码的一部分。var wh = Math.max(600,$(window).height()); var ww = Math.max(800,$(window).width());

然后我可以根据窗口大小在我的页面中设置 div 的大小。$('div#mydiv').css('width',ww); 您还可以将值设置为 auto 以取消设置您的指定值。

Answer 3

我知道这有点作弊，但您可以使用旧技巧，在浮动元素中放入具有所需最小宽度且颜色相同的图像。然后它实际上是不可见的，但可以防止元素缩小，从而防止整个页面缩小。