如何让Ant Design Modal在iPad设备上实现全屏显示？

你的问题出在没有覆盖Ant Design Modal完整的层级样式，仅修改.ant-modal不足以在iPad等触摸设备上实现全屏。以下是针对性的修复方案：

1. 修正StyledModal的样式覆盖 #

AntD Modal的结构包含.ant-modal-wrap（外层容器）、.ant-modal（弹窗容器）、.ant-modal-content（内容容器）三层，需要逐层覆盖默认样式：

const StyledModal = styled(Modal)`
  /* 覆盖外层wrap，确保占满整个视口 */
  .ant-modal-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0 !important; /* 去掉默认内边距 */
    margin: 0;
  }

  /* 弹窗容器全屏 */
  .ant-modal {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0;
    max-width: none !important; /* 取消AntD默认的最大宽度限制 */
  }

  /* 内容容器占满弹窗 */
  .ant-modal-content {
    height: 100%;
    border-radius: 0; /* 可选：去掉圆角，更贴合全屏 */
  }

  /* 可选：关闭按钮调整位置 */
  .ant-modal-close {
    top: 16px;
    right: 16px;
  }
`;

2. 结合AntD Modal的fullscreen属性 #

可以直接利用AntD Modal自带的fullscreen属性，再配合自定义样式增强iPad适配：

<StyledModal
  open={isModalVisible}
  onCancel={handleCloseModal}
  footer={null}
  fullscreen={true}
>
  {selectedItem && <FullScreenComponent item={selectedItem} />}
</StyledModal>

3. 确保页面Viewport设置正确 #

在项目的index.html中，确保viewport设置支持触摸设备的全屏适配：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

4. 处理iPad的特殊适配（可选） #

如果仍有问题，可以针对iPad的媒体查询做额外调整：

const StyledModal = styled(Modal)`
  /* ... 上述样式 ... */

  /* iPad 横屏/竖屏适配 */
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .ant-modal-wrap {
      position: fixed !important;
      overflow: hidden;
    }
  }
`;

这些修改会确保Modal在iPad上完全占满视口，同时覆盖AntD的默认样式限制。

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