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

针对你提供的遗留代码，桌面端正常但移动端失效，可从以下几个方向排查：

• 交互事件适配问题
  桌面端依赖:hover伪类切换图标（.icon和.icon_hover的显示/隐藏），但移动端没有鼠标悬浮事件，触摸操作无法触发:hover状态，或者触发后状态不会自动重置。可以测试：

  • 触摸图标后是否能切换显示状态？
  • 触摸其他区域后状态是否恢复？
    解决思路：添加:active伪类配合，或者用JS监听触摸事件来切换类名替代:hover。

• 自定义组件的移动端兼容性
  BubbleContent和Bubble是自定义组件，需检查组件内部逻辑：

  • BubblePosition="right"和TrianglePosition="top"在移动端窄屏环境下，是否会出现弹窗溢出屏幕、位置偏移等问题？
  • 组件是否针对移动端做了响应式布局处理，比如动态调整弹窗的宽度、位置？

• SCSS移动端变量的有效性
  代码中用@if($is-mobile)区分移动端样式，需确认：

  • $is-mobile变量的判断逻辑是否准确？比如是否基于正确的viewport断点（如max-width:768px）或用户代理检测？
  • 移动端是否正确应用了margin-bottom:0等样式？可通过浏览器开发者工具的移动端模式查看元素样式。

• 移动端视口与尺寸适配

  • 页面是否设置了正确的viewport meta标签？缺少<meta name="viewport" content="width=device-width, initial-scale=1.0">会导致移动端浏览器缩放页面，使14px的元素显示异常。
  • .summ_info固定的14px宽高在移动端高DPI屏幕下，是否出现模糊或布局错位？可尝试用rem或vw等相对单位替代固定像素。

• 触摸目标区域与浏览器默认行为

  • .summ_info和.BubbleContent的尺寸仅14px，移动端触摸目标过小，可能导致交互难以触发，进而影响组件渲染（如弹窗无法显示）。建议增大触摸区域的padding或设置min-height/min-width。
  • cursor:pointer在移动端无效，可移除或添加touch-action:manipulation优化触摸体验。

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