Html 保持像素比例但缩放大小

所以我有一个使用asp.net创建的模拟器。 仿真器使用与设备大小相同的iframe

然而，在ipad上，设备的尺寸对于屏幕来说太大了，我需要调整它的尺寸

有人知道我如何在保持iPad像素比例的前提下扩展iPad吗？ 或者这是否有可能

任何帮助都将不胜感激

---

谢谢。

您可以使用填充底部技巧来确保任何元素在可变宽度下保持其比率

iframe {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}

iframe .child {
    width: 100%;
    height: 100%;
    position: absolute;
}

56.25%

确保iframe将保持通过9/16*100计算得出的16:9比率

---

现在，您可以将iframe的宽度更改为适合您的布局的任何宽度。

也许这对您有用。我以前也遇到过同样的问题，这很有效

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

---

这篇文章可能会帮助你：这太棒了