移动端分享弹窗在平板上居中显示需用媒体查询适配768px–1024px断点，结合fixed定位、flex居中及响应式宽度控制，避免依赖dpr或user-agent。
移动端分享弹窗在平板上居中显示，核心是用媒体查询（@media）针对平板设备的视口宽度和设备特性做样式适配，而不是简单套用手机尺寸规则。关键在于区分“小屏竖屏”和“中大屏横/竖屏”，并让弹窗具备响应式定位能力。
识别平板设备的合理断点
多数平板（如 iPad、安卓中高端平板）在竖屏时宽度约 768px–834px，横屏可达 1024px–1366px。推荐使用以下常见且兼容性好的断点：
- 768px ≤ width ≤ 1024px：覆盖主流平板竖屏与部分横屏场景
- 避免只依赖
max-width: 1024px，因为部分大屏手机（如 Pixel XL、iPhone Plus）也会命中，应结合min-width: 768px更精准 - 可额外加
orientation: portrait或landscape进行方向微调（非必需，但更精细）
弹窗结构需支持响应式居中
纯靠 top: 50%; left: 50%; transform: translate(-50%, -50%) 在平板上可能失效（尤其内容高度动态或 body 有滚动时）。建议：
- 弹窗容器设为
position: fixed，全屏覆盖，防止被滚动影响 - 内部内容盒（.share-modal__content）用
margin: auto+max-width+width: min(90%, 500px)控制宽度 - 垂直居中用
display: flex; align-items: center; justify-content: center;更稳定
媒体查询中针对性重写弹窗样式
在默认移动端弹窗（窄宽、贴底或全屏）基础上，为平板单独设置居中样式：
@media screen and (min-width: 768px) and (max-width: 1024px) {
.share-modal {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.6);
}
.share-modal__content {
width: min(90%, 480px);
max-width: 480px;
margin: 0 auto;
background: #fff;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}
}
注意：如果弹窗初始是 display: none，确保在媒体查询内也显式设为 display: flex 或对应可见状态。
补充建议：避免常见坑
不推荐仅靠设备像素比（dpr）或 user-agent 判断平板——H5 环境下不可靠且难以维护。坚持用视口宽度 + 布局逻辑更稳妥。
- 测试时用 Chrome DevTools 的 “Responsive” 模式，手动输入 810×1080（iPad 竖屏）、1024×1366（iPad 横屏）等典型分辨率验证
- 若项目用 Vue/React，可在 JS 中监听
resize并根据window.innerWidth动态加 class，但 CSS 媒体查询仍是首选方案 - 对 iOS Safari，确保
viewportmeta 设置正确：<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则媒体查询可能不触发
