WordPress中FancyBox移动端无法适配屏幕问题求助

以下是几个针对性的解决方向，你可以逐一尝试：

• 调整核心配置参数
  手动限制弹窗的最大宽高，确保不超出移动端视口，同时开启触摸支持。修改你的FancyBox初始化代码：

  $(document).ready(function() {
    $(".fancybox").fancybox({
      touch: true,
      width: '90%',
      maxWidth: '100vw',
      height: 'auto',
      maxHeight: '90vh',
      fitToView: true,
      autoSize: false // 关闭自动尺寸计算，优先使用手动配置
    });
  });
  

• 添加移动端专属CSS
  通过媒体查询强制覆盖弹窗容器的样式，同时处理内容溢出：

  /* 适配移动端屏幕 */
  @media (max-width: 768px) {
    .fancybox-container {
      max-width: 100vw !important;
      padding: 10px !important;
    }
    .fancybox-content {
      width: 90% !important;
      max-width: 100% !important;
      height: auto !important;
      max-height: 90vh !important;
      overflow-y: auto !important; /* 内容过长时允许垂直滚动 */
    }
    /* 确保弹窗内图片适配 */
    .fancybox-content img {
      max-width: 100% !important;
      height: auto !important;
    }
  }
  

• 检查弹窗内容内部元素
  弹窗里如果存在固定宽度的元素（比如设置了width: 800px的div、表格），会直接撑破弹窗容器。把这类元素的宽度改为max-width: 100%，让其随弹窗宽度自适应。

• 升级FancyBox版本
  旧版本的FancyBox可能存在移动端适配的已知bug，升级到最新稳定版可以修复部分兼容性问题。

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