Angular 7中Angular Material侧边导航移动端横屏显示异常求助

问题根源 #

你的问题出在CSS媒体查询与Angular CDK Breakpoints的判断逻辑冲突：

• Angular CDK的Breakpoints.Handset包含了横屏时宽度≤959px的设备（比如绝大多数手机的横屏状态）；
• 但你的CSS设置了min-width:768px时隐藏侧边栏，导致当手机横屏宽度在768px~959px之间时：
  1. isHandset$仍返回true，工具栏上的菜单按钮正常显示；
  2. 点击按钮后，侧边栏试图以over模式打开，但被CSS的display:none强制隐藏，最终只留下遮罩层。
     另外，fixedInViewport="false"的设置可能导致横屏时侧边栏随页面滚动偏移，进一步加剧了看不到内容的问题。

修复方案（无需放弃Angular Material） #

只需调整以下3处即可解决问题：

1. 移除冲突的CSS媒体查询

打开navigation.component.scss，删除这段与Breakpoints逻辑不一致的代码：

@media screen and (min-width: 768px) {
 .sidenav {
 display: none;
 }
}

2. 优化侧边栏的渲染与定位逻辑

修改navigation.component.html中的<mat-sidenav>标签，用*ngIf控制仅在手持设备（包括横屏）时渲染侧边栏，并固定视口避免偏移：

<mat-sidenav #drawer 
             *ngIf="(isHandset$ | async)"
             class="sidenav" 
             fixedInViewport="true"
             role="dialog"
             mode="over"
             [opened]="false" >

3. 确保侧边栏层级高于工具栏

在navigation.component.scss的.sidenav类中添加更高的z-index，避免被工具栏遮挡：

.sidenav {
 width: 200px;
 background: rgba(255, 255, 255, 0.8);
 z-index: 10000; /* 高于工具栏的z-index:9999 */
}

验证效果 #

修改完成后测试：

• 手机横屏状态下，菜单按钮正常显示；
• 点击按钮后，侧边栏会固定在视口内完整显示，不会被隐藏或遮挡；
• 桌面端依然保持原有逻辑，不渲染侧边栏，仅显示顶部导航按钮。

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