Question

我正在测试Flex中CSS样式的网站。问题是该网站在笔记本电脑上显示良好，但在移动设备上显示不佳。请参考图片以获取更多详细信息

测试环境：Chrome / Firefox / Safari，iphone 7，Macbook。

任何建议都非常感谢。

P / s：如果有人需要更多代码细节，请发表评论。

编辑

代码：

header.html

<mat-toolbar class="mat-elevation-z6 navbar" [ngClass]="{ compact: isHandset | async }">
  <div class="logo">
    <img src="/assets/images/logo.png" alt="" />
  </div>
  <!-- <span fxFlex></span> -->
  <span class="title">{{ title }}</span>
  <div>
    <button mat-icon-button [matMenuTriggerFor]="userMenu">
      <mat-icon>person</mat-icon>
    </button>
    <mat-menu #userMenu="matMenu">
      <mat-list>
        <mat-list-item>
          <b>{{ useremail }}</b>
        </mat-list-item>
        <mat-divider></mat-divider>
      </mat-list>
      <button mat-menu-item (click)="logout()" translate>{{ 'Menu.Logout' | translate }}</button>
    </mat-menu>
  </div>
</mat-toolbar>

header.scss

.navbar {
  position: fixed;
  top: $zero;
  left: $zero;
  right: $zero;
  display: flex;
  justify-content: space-between;
  background-color: $header-bg;

  @include set-font(
    $header-font-family,
    $header-font-size,
    $header-font-weight,
    $header-font-style,
    $header-text-color
  );

  .logo {
    min-width: $header-logo-width-mobile;
    height: $header-logo-height;
    width: $header-logo-width;
    img {
      width: $w-100;
      height: $h-100;
    }
  }

  .menu-button {
    margin-right: 1rem;
  }

  &.compact {
    .logo {
      height: $header-logo-height-mobile;
      width: $header-logo-width-mobile;
    }
  }
}

info.html

<div class="game-info">
    <div class="team">
      <img  src={{game_info.home_logo}} alt="overlayed img" />
     </div>
  ...

  <div class="team">
    <img src= {{game_info.away_logo}} alt="overlayed img" />
    </div>  
</div>

info.scss

.game-info {
  display: flex;
  align-items: center;
  justify-content: space-around;
  max-height: 200px;
  margin-bottom: 10px;

  .team {
    display: inline-flex;
    width: 25%;
    max-width: 100px;
    max-height: 100px;

    img {
      max-width: 80%;
      max-height: 80%;
    }
  }

}

我还创建了一个弹奏来玩： https://stackblitz.com/edit/angular-s8tudg

Answer 1

对于图像变形问题，请尝试在移动屏幕尺寸媒体查询width: XX px;中同时添加height:XX px;和@media和一些值，或者在大屏幕中反之亦然。

对于标题问题，请尝试将z-index: 1000;和flex-wrap: wrap添加到标题容器和flex-container中。可能会有帮助。

Angular：Flex在移动设备上无法很好地运行（IOS 13）

编辑

1 个答案: