移动端全屏弹窗显示异常及滚动问题修复求助

1. 补全移动端基础适配 #

先确保HTML头部添加viewport meta标签，这是移动端布局正常显示的核心前提：

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

2. 核心CSS修正（解决显示与滚动问题） #

替换你当前的弹窗相关CSS为以下代码，关键优化点已标注：

/* 弹窗遮罩层 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 避免长内容顶部被视口截断 */
  padding: 20px;
  box-sizing: border-box; /* 确保padding不会撑大容器 */
  z-index: 9999;
  overflow-y: auto; /* 允许遮罩层整体滚动（适配极端长内容） */
  -webkit-overflow-scrolling: touch; /* 优化iOS触摸滚动流畅度 */
}

/* 弹窗内容区 */
.popup-content {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 40px 20px 20px; /* 顶部预留关闭按钮空间 */
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto; /* 内容区独立滚动 */
  position: relative; /* 为关闭按钮的absolute定位提供参考 */
  -webkit-overflow-scrolling: touch;
}

/* 关闭按钮 */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  background-color: #f5f5f5;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10000; /* 确保按钮不被内容遮挡 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 弹窗标题 */
.popup-content h2 {
  margin-top: 0; /* 避免标题被顶部padding挤到不可见区域 */
  font-size: 1.5rem;
}

3. 关键问题说明 #

• 元素不显示：之前的布局可能因fixed定位未正确占满视口、内容区margin/padding冲突，或z-index层级过低导致元素被遮挡；上述代码通过box-sizing: border-box、合理的padding和z-index解决。
• 滚动异常：移动端滚动需要明确设置overflow-y: auto，同时添加-webkit-overflow-scrolling: touch优化iOS上的滚动体验；遮罩层和内容区的双层滚动确保极端场景下内容都能被浏览。
• 横竖屏适配：使用vw/vh单位和max-width/max-height，确保弹窗在横竖屏切换时都能自适应视口尺寸。

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