求助：如何通过自定义CSS增大移动端网页嵌入Iframe的高度？

步骤1：定位目标Iframe的选择器 #

通过浏览器开发者工具（切换到移动端模式）查看该预约服务Iframe的属性，可通过它的class、id或父容器来精准定位。比如页面中该Iframe的父容器类为wp-block-embed__wrapper，则选择器可写为.wp-block-embed__wrapper iframe。

步骤2：添加移动端适配CSS #

针对宽度≤768px的移动端屏幕，设置Iframe的最小高度并确保宽度自适应，覆盖主题原有样式：

@media screen and (max-width: 768px) {
  .wp-block-embed__wrapper iframe {
    min-height: 800px; /* 可根据预约内容实际高度调整数值 */
    width: 100% !important;
    height: auto !important;
  }
}

注：如果你的Iframe有专属class/id，替换上述选择器即可；!important用于强制覆盖主题默认样式，若选择器足够精准可省略。

步骤3：添加自定义CSS的位置 #

将上述代码添加到网站后台：

• 进入外观 > 自定义 > 额外CSS
• 粘贴代码后保存设置

备选方案：动态适配内容高度（可选） #

如果预约服务内容高度不固定，可配合JS实现高度自动匹配：

// 监听iframe加载完成后调整高度
document.querySelector('.wp-block-embed__wrapper iframe').addEventListener('load', function() {
  this.style.height = this.contentWindow.document.body.scrollHeight + 'px';
});

将代码添加到主题footer.php文件末尾，或通过自定义JS插件插入。

内容的提问来源于stack exchange，提问作者Brent Verco