如何让我的网站在 1920 x 1080 和 3840 × 2160 上看起来完全一样答案

【问题标题】：How can I have my website to look exactly the same on 1920 x 1080 and 3840 × 2160如何让我的网站在 1920 x 1080 和 3840 × 2160 上看起来完全一样
【发布时间】：2019-06-12 01:29:00
【问题描述】：

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

如果您将图像从 1920 x 1080 笔记本投影到 3840 × 2160 显示器，它在两个屏幕上的外观会相同，但可能会因为放大而有点模糊。

但是我怎样才能在 3840 × 2160 笔记本屏幕上达到相同的效果，使其看起来与在 1920 x 1080 笔记本上完全相同？

假设我有办法检测分辨率是否高于 1920 x 1080。仅使用缩放不会达到预期的效果。

变换：比例（2）；

...因为网站只会延伸到布局之外。比如缩放所有字体、图像或任何没有以百分比定义的东西。

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

【问题讨论】：

您是否也希望它在手机上看起来也一样？
不，只要超过 1920 宽度。达到全高清后，布局完全没有变化。
youtube.com/watch?v=G-5L1ay5xI4
令人着迷，不知道“缩放”属性。如果它可以在 Firefox 中运行，它看起来是一个很好的解决方案:(
您只需相应地扩展其他响应行为（页面包装宽度、字体大小）。不需要缩放或其他 whizbang。不过，这个问题对 SO 来说太宽泛了。

标签： html css firefox responsive-design scale

【解决方案1】：

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

zoom: 2;

但任何版本的 Firefox 都不支持它。如果你按比例放大和缩小宽度，你仍然可以在 Firefox 中达到类似的效果：

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

如果您不需要水平滚动，它会起作用，但它会在页面上添加滚动条，zoom 可能不存在，并且还会缩放元素内部的滚动条，使其变胖（如果您不这样做，这不是问题'不需要容器内的滚动条）。

【讨论】：