Wordpress站点Calendly移动端预约页面显示尺寸异常求助

1. 强制覆盖Calendly iframe的移动端样式 #

Calendly的iframe大概率被主题或全局CSS的移动端媒体查询限制了高度，直接在主题自定义CSS中添加以下代码：

@media (max-width: 768px) {
  .calendly-inline-widget {
    min-height: 900px !important;
    height: 100vh !important;
  }
  iframe[src*="calendly.com"] {
    min-height: 900px !important;
    height: 100vh !important;
    width: 100% !important;
  }
}

100vh会让组件占满移动端可视高度，min-height兜底防止高度不足，!important强制覆盖原有冲突样式。

2. 排查主题容器的移动端限制 #

部分响应式主题会给内容容器设置overflow: hidden或固定高度，导致iframe被截断：

• 打开浏览器开发者工具（切换到移动端调试模式），定位Calendly组件的父容器
• 检查父容器的CSS属性，移除overflow: hidden或max-height限制
• 若为主题默认设置，可在自定义CSS中针对该容器添加：

@media (max-width: 768px) {
  .你的Calendly容器类名 {
    overflow: visible !important;
    max-height: none !important;
  }
}

3. 替换插件为官方嵌入代码 #

插件可能自带冗余样式干扰，直接用Calendly官网生成的内联嵌入代码替换插件：

1. 登录Calendly后台，进入「分享」→「嵌入」→「内联嵌入」
2. 复制生成的完整代码（含iframe和脚本）
3. 在WordPress页面添加「自定义HTML」区块，粘贴代码
4. 手动将代码中的height属性改为"900px"或"100vh"

4. 禁用移动端优化插件的相关规则 #

WP Rocket、Autoptimize这类性能插件的懒加载、CSS压缩功能可能破坏Calendly样式：

• 临时禁用插件，测试移动端显示是否恢复正常
• 若有效，在插件设置中将calendly.com加入白名单，排除懒加载和CSS压缩规则

5. 调整主题响应式断点 #

部分主题的响应式断点设置过窄，导致移动端样式提前触发：

• 进入主题自定义面板，找到「响应式」或「布局」选项
• 确认移动端断点（如768px）符合常规标准，避免过早加载PC端限制样式

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