iFrame的HTML调整大小的内容

Question

我目前正在使用sendgrid的预构建电子邮件格式作为iFrame。

一切正常。我唯一的问题是，在移动设备上，iFrame的内容太大，无法显示在屏幕上，就像在图像上看到的那样：

因此，我尝试使用scale：0.5调整内容的大小，但这只是使整个iFrame变小。

我当前的CSS代码如下：

 .bg-modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    justify-content: center;
    align-items: center;
}

.modal-contents {
    height: 600px;
    width: 600px;
    background-color: white;
    text-align: center;
    position: relative;
    border-radius: 4px;
}

.iframeClass{
    width: 100%;
    height:100%;
    overflow:hidden;
}

我的HTML是这样：

<div class="bg-modal">
<div class="modal-contents">
    <iframe scrolling="no" class="iframeClass" frameborder="0" src="https://..."></iframe>
</div>
</div>

我不想显示滚动条。

有人知道解决此问题的方法吗？

Answer 1

您的设备分辨率低于600像素，因此它将向侧面滚动。

您可以使用max-width对其进行分类。

解决方案

.bg-modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    justify-content: center;
    align-items: center;
}

.modal-contents {
    height: 600px;
    width: 600px;
    max-width: 100%; /* This makes it so if the device is under 600px, it will resize to be the width of the screen and it will not overflow */
    background-color: white;
    text-align: center;
    position: relative;
    border-radius: 4px;
}

.iframeClass{
    width: 100%;
    height:100%;
    overflow:hidden;
}

如果仍然遇到问题，请尝试以下操作：

body {
    overflow-x: hidden;
}

Answer 2

您将宽度和高度设置为模型内容的600px，也将iframe的高度和宽度设置为100％。因此，不管iframe的屏幕尺寸如何，总是600px * 600px。您可以通过将width设置为max-width来修复它，并根据您的设计添加一些填充和合并。或者，您可以在模型内容中将vw用于宽度，将vh用于高度。

.modal-contents {
    height: 600px;
    max-width: 600px;
    background-color: white;
    text-align: center;
    position: relative;
    border-radius: 4px;

}

.iframeClass{
    width: 100%;
    height:100%;
    overflow:hidden;
}