时间戳

首页 > 解决方案 > Angular：Flex 在移动设备上运行不佳（IOS 13）

javascript - Angular：Flex 在移动设备上运行不佳（IOS 13）

问题描述

我正在测试一个由 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>

头文件.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;
    }
  }
}

信息.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>

信息.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%;
    }
  }
  
}

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

标签： javascriptcssangularflexboxangular-material

解决方案

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

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

推荐阅读