Question

想象一个充满了所有内容和文字的网站，它可以在1920 x 1080笔记本电脑屏幕上正常运行。

如果将图像从1920 x 1080笔记本电脑投影到3840××2160显示器，则在两个屏幕上看起来都是相同的，可能由于放大而有些模糊。

但是如何在3840××2160笔记本电脑屏幕上获得相同的结果，使其看起来与1920 x 1080笔记本电脑上的效果完全相同？

假设我有一种方法可以检测分辨率是否高于1920 x1080。仅使用缩放将无法获得预期的结果。

transform：scale（2）;

...因为网站只会扩展外部布局。诸如缩放每种字体，图像或任何未按百分比定义的内容之类的东西。

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

Answer 1

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

zoom: 2;

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

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

如果您不需要水平滚动，它将起作用，但是它将滚动条添加到页面中，滚动条可能不会与zoom一起出现，并且还可以缩放元素内部的滚动条，使它们变胖（如果您不需要在容器内使用滚动条。