html - HTML 调整 iFrame 内容的大小

Question

我目前正在使用 sendgrid 的 prebuildt 电子邮件形式作为 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>

我不想显示滚动条。

有人知道这个响应问题的解决方案吗？

标签： htmlcssiframeresponsivesendgrid

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;
}