html - 缩放 HTML/CSS 以适应各种显示器，这可能吗？

Question

我知道 SVG 支持这个。但我想知道 HTML/CSS 是否可以按比例放大和缩小，就像适合各种显示器的图像一样？例如，考虑一个基于 HTML5 phonegap 的移动应用程序，它可以在 iPhone(3、4s、5 等)、android 等许多不同尺寸的屏幕上“工作”，以及那里的多种屏幕尺寸。

我不是在谈论使用百分比宽度，例如 100%，或 20% 在 div 中，em 用于字体，或一堆媒体查询。我想在我的 div 上使用绝对宽度/高度，因为它更容易编程。

例如，假设我创建了一个宽度为 400 像素、高度为 600 像素的应用，并且该 div 中的所有内容(按钮、更多 div、图像等)也使用像素高度和宽度以及定位。

现在，有没有办法像图像一样将这个东西“缩放”到我想要的任何分辨率？有点像用

包围它

<scaleToDevice>
<div style='width:400px;height:600px'>
    ... All my other UI here, like buttons, etc would use absolute positioning with pixels
</div>
</scaleToDevice>

它会“正常工作”，就像您在 Photoshop 中缩放图像一样。除了这只是在 HTML/CSS 上，缩放到设备的 100% 宽度和高度，应用程序将保持交互。

Answer 1

有可能，您需要使用 CSS transform属性(property)。但是，请记住您需要做一些数学运算，因为您需要记住方向和屏幕的纵横比。但是，好吧，如果您想这样做，就可以做到。这是我提供给另一位用户的一些代码，您可以将其用作起点:

#body {
    width:100vw;
    height:100vh;
    text-align:center;
}
#content {
    transform: translateY(-50%);
    -webkit-transform:translateY(-50%);
    top:50%;
    transform: scale(2);
    transform-origin: 0%;
}

这也会使元素的比例从中心开始增长(例如，如果您旋转 View ，这在移动设备上看起来会更好。您还可以添加过渡以获得更平滑的效果)。所以继续，试试吧。但是没有其他人不这样做是有原因的:付出的努力不值得最终的结果，你最终总是需要微调