Ionic 1 iOS应用Cordova引导页在iPhone6+及以上设备无法显示

我之前也遇到过类似的引导层在大尺寸高分辨率设备失效的情况，大概率是你CSS里的超大box-shadow扩散半径导致的问题，下面给你具体的分析和修复方案：

问题根源 #

iPhone 6 Plus及以上机型是3倍像素密度（@3x）的屏幕，你设置的1997px扩散半径在实际渲染时会被放大到1997 * 3 = 5991px，这个数值可能超出了WebView的渲染上限，导致阴影无法正常绘制，最终引导页的遮罩层完全不显示。另外，绝对定位元素在不同屏幕尺寸下的坐标计算偏差，也可能让遮罩层位置偏移到可视区域外。

修复方案 #

1. 用视口单位替换固定大像素的阴影半径
   把固定像素的扩散半径改成基于视口的相对单位100vmax，这样不管屏幕多大都能覆盖整个视口，还不会触发渲染上限问题：

   .walkthrough-hole {
     position: absolute;
     /* 用vmax替代固定大像素，确保覆盖全屏幕 */
     -moz-box-shadow: 0 0 3px 100vmax rgba(0, 0, 0, .8);
     -webkit-box-shadow: 0 0 3px 100vmax rgba(0, 0, 0, .8);
     box-shadow: 0 0 3px 100vmax rgba(0, 0, 0, .8);
     /* 补上你之前的border-radius等其他属性 */
     border-radius: ...;
   }
   

2. 确保遮罩层的层级和定位基础正确
   检查引导层的容器是否设置了正确的定位和层级，避免被其他元素覆盖：

   .walkthrough-container {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 9999; /* 确保在所有元素最上层 */
     pointer-events: none; /* 允许点击遮罩下层的元素，按需调整 */
   }
   .walkthrough-hole {
     position: absolute;
     pointer-events: auto; /* 如果需要点击孔洞内的元素，可保留 */
     /* 上面的阴影样式 */
   }
   

3. 校验Ionic 1的viewport配置
   确保index.html里的viewport设置正确，避免屏幕缩放导致的布局偏差：

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

4. 适配高分辨率设备的坐标计算
   如果是孔洞位置偏移导致看起来没显示，可以在代码里打印window.devicePixelRatio获取当前设备像素比，根据这个数值调整孔洞的定位参数，确保在3x屏上坐标准确。

额外兜底方案 #

如果修改阴影后还是有问题，可以给遮罩容器加一个显性背景色兜底：

.walkthrough-container {
  background-color: rgba(0,0,0,.8);
}

这样即使阴影失效，遮罩层也能正常显示，再通过孔洞的透明背景实现镂空效果。

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