为何mat-bottom-sheet-container在移动设备上溢出且无法贴底？

我的Angular应用里有个弹窗，之前用Chrome DevTools的屏幕模拟功能测试不同分辨率时，确认mat-bottom-sheet-container容器在移动设备上的样式和位置都正常。但在真实安卓平板（Chrome v116.0.5）测试时，弹窗出现截断问题，而且平板和DevTools模拟的屏幕分辨率完全一致。

真实平板效果：
DevTools模拟效果：

可能的成因： #

• 设备像素比(DPR)差异：DevTools模拟仅匹配物理像素，但真实平板的设备像素比更高，CSS中基于px的尺寸计算出现偏差，弹窗容器实际显示尺寸被压缩。
• Chrome版本渲染差异：DevTools使用的Chrome版本与平板上的v116.0.5存在渲染引擎细微差异，Material组件的样式适配逻辑在该版本存在Bug。
• 系统级缩放设置：安卓平板可能开启了系统显示缩放（如125%/150%），覆盖浏览器视口设置，导致弹窗布局计算偏离预期，而DevTools默认不模拟这种系统缩放。
• 视口元标签配置问题：应用视口元标签未正确设置viewport-fit=cover或initial-scale参数，真实设备浏览器会根据系统调整视口，DevTools模拟忽略了这些系统级调整。
• Material组件适配Bug：mat-bottom-sheet组件在大尺寸平板的横竖屏布局中，存在真实设备特有的适配问题，DevTools模拟未复现该场景的渲染逻辑。
• 硬件加速渲染差异：真实平板GPU渲染管线与DevTools软件模拟存在差异，导致CSS transform、position等属性渲染结果不一致，引发弹窗截断。

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