ASP.NET项目DIV桌面端正常但移动端浏览器不显示排查

关于ViewSwitcher.ascx的说明 #

• ViewSwitcher.ascx是ASP.NET Web Forms 4.x模板自带的设备视图切换组件，核心作用是检测访问请求的设备类型，在桌面版页面和独立移动版页面（后缀通常为.Mobile.aspx）之间提供切换入口，组件本身不会主动隐藏页面内的DOM元素，和你遇到的悬浮层不显示问题无直接关联。
• 如果项目不需要开发独立的移动版专属页面，这个组件可以直接从母版页中移除，不会影响现有业务功能运行。

移动端悬浮层不显示的核心原因与修复 #

你当前的代码在移动端失效，本质是两个移动端浏览器和桌面端的渲染逻辑差异导致的，和ViewSwitcher无关：

1. 缺少视口（viewport）配置
   ASP.NET 4.8默认模板的页面如果没有手动添加视口标签，移动端浏览器会默认按照980px左右的桌面宽度渲染页面再缩放，加上你给iframe设置了min-width:855px、给悬浮div用margin做偏移，很容易导致div直接偏移到可视区域外。
   修复方式：在母版页或当前页面的<head>区域添加视口配置：

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

2. 跨域iframe的堆叠上下文优先级问题
   移动端所有主流浏览器对跨域iframe的渲染逻辑和桌面端不同：跨域iframe会被浏览器分配独立的高优先级堆叠上下文，仅给上层悬浮元素设置z-index无法覆盖在iframe上方，必须同时给iframe明确设置更低的z-index值；另外绝对定位元素用margin做偏移在移动端容易出现计算误差，建议改用top/left属性定位。
   把原有CSS替换为以下内容即可：

#compass {
    background: url("../images/compass2.png");
    background-size: cover;
    vertical-align: middle;
}

.divCanvas {
    z-index: 999;
    position: absolute;
    /* 替换margin为top/left做定位，偏移值和原有margin值一致 */
    left: 525px;
    top: 70px;
}

iframe {
    position: absolute;
    border: solid;
    border-width: 1px;
    box-sizing: border-box;
    min-width: 855px;
    min-height: 465px;
    z-index: 1; /* 明确给iframe设置低层级 */
    top: 0;
    left: 0;
}

验证步骤 #

修改完成后清空移动端浏览器缓存重新访问即可，如果仍然不显示，检查母版页中是否存在移动端判断逻辑给body或html标签加了overflow:hidden或者针对小屏的display:none规则即可。

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