桌面端正常的HTML+CSS代码无法在移动端渲染，求排查方向

结合你提供的代码，以下是几个可能的问题方向：

• :hover 事件在移动端失效
  桌面端依赖:hover切换图标显示，但移动端没有鼠标悬浮事件，触摸操作不会触发:hover，导致.icon_hover无法显示，同时Bubble组件可能也依赖hover触发弹出逻辑。可以尝试添加:active伪类兼容，或者用JS监听touchstart/touchend事件替代hover逻辑。

• 移动端变量判断逻辑错误
  SCSS中的$is-mobile变量是否正确识别了移动端？如果变量判断失效，会导致.dfinfo的margin等移动端样式不生效，甚至可能影响.summ_info的尺寸布局。要确认该变量对应的媒体查询（比如@media (max-width: 768px)）是否正确配置。

• 自定义组件的移动端适配缺失
  BubbleContent和Bubble是自定义组件，可能内部只实现了桌面端的定位、交互逻辑。比如BubblePosition="right"在小屏幕下可能超出视口，导致气泡无法显示；或者组件没有处理移动端的触摸触发逻辑，导致内容无法渲染。

• 尺寸继承的兼容性问题
  .summ_info、.BubbleContent、.icon大量使用inherit继承宽高，移动端的默认样式（如字体大小、盒模型）和桌面端存在差异，可能导致继承的14px尺寸在移动端显示异常，甚至元素被压缩或隐藏。

• 触摸热区过小
  .BubbleContent的触摸区域只有14px（继承自.summ_info的宽高），移动端用户很难精准点击这么小的区域，导致气泡无法触发显示。可以通过增加padding或者添加伪元素来扩大可点击区域。

你提供的代码： #

HTML部分：

<div class="summ_info" data-priority="2">
    <BubbleContent Data="@ViewModel.BubbleContent">
        <div class="icon"></div>
        <div class="icon_hover"></div>
    </BubbleContent>

    <Bubble Data="@ViewModel.BubbleContent" BubblePosition="right" TrianglePosition="top">
        <div>"Content"</div>
    </Bubble>
</div>

SCSS部分：

.dfinfo {
    @if($is-mobile) {
        margin-bottom: 0;
    }
    @else {
        margin-bottom: 16px;
    }

    & > span {
        font-size: 14px;
    }

    .summ_info {
        position: relative;
        display: inline-block;
        height: 14px;
        width: 14px;

        .BubbleContent {
            vertical-align: middle;
            height: inherit;
            width: inherit;
            padding: 3px 3px 3px 3px;
            cursor: pointer;
            display: block;

            .icon{
                height: inherit;
                width: inherit;
                background-image: url(###);
                background-size: contain;
                display: block;
            }

            .icon_hover {
                height: 0px;
                width: 0px;
                background-image: url(###);
                background-size: contain;
            }

            &:hover .icon_hover {
                height: inherit;
                width: inherit;
            }

            &:hover .icon {
                display: none;
            }
        }
    }
}

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