html - 我怎样才能让我的网站在 1920 x 1080 和 3840 × 2160 上看起来完全一样

Question

想象一个充满组件和文本的网站，它在 1920 x 1080 笔记本屏幕上运行良好。

如果您将图像从 1920 x 1080 笔记本投影到 3840 × 2160 显示器，它在两个屏幕上看起来是一样的，可能因为放大而有点模糊。

但我如何才能在 3840 × 2160 笔记本屏幕上获得相同的结果，使其看起来与在 1920 x 1080 笔记本上完全一样？

假设我有一种方法可以检测分辨率是否高于 1920 x 1080。仅使用缩放不会达到预期的结果。

transform: scale(2);

... 因为网站只会拉伸(stretch)外部布局。 比如缩放每个字体、图像或任何未按百分比定义的内容。

在我的脑海中有一个想法，如果您可以以某种方式阻止网站扩展到超过 1920 像素(密度方面)并通过按比例缩放内容来填充空白，但这听起来很疯狂，有什么建议吗？

Answer 1

正如 Robert Harvey 提到的，CSS 中有一个 zoom 属性。 要将组件缩放两次，请将此行添加到 HTML 容器中:

zoom: 2;

但它不受任何版本的 Firefox 支持。 如果您按比例放大所有内容并按比例减小宽度，您仍然可以在 Firefox 中实现类似的效果:

-moz-transform: scale(2);
-moz-width: 50%;
-moz-transform-origin: top left;

如果您不需要水平滚动，它会起作用，但它会向页面添加滚动条，zoom 可能不会出现滚动条，并且还会缩放元素内的滚动条，使它们变胖(这不是如果您不需要容器内的滚动条，就会出现问题。