Angular 14 Bootstrap 5 网页不会在移动设备上缩放/调整为表格/网页宽度答案

【问题标题】：Angular 14 Bootstrap 5 web page won't scale/resize to table/web page width on mobile devicesAngular 14 Bootstrap 5 网页不会在移动设备上缩放/调整为表格/网页宽度
【发布时间】：2022-12-09 02:09:17
【问题描述】：

component.html：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark" style="background-color: #EA600E!important">
  <div class="container-fluid">
    <a class="navbar-brand" href="#" style="font-size: 2rem;">
      <img src="assets/bootstrap-logo.svg" width="28" height="28" class="d-inline-block">
      TABLE GONE BAD
    </a>
  </div>
</nav>

<div class="container-fluid">
  <h2>Hello Bootstrap 5</h2>

  <table class="table table-striped table-sm">
    <thead>
      <th>Name</th>
      <th>Last name</th>
      <th>Nickname</th>
      <th>Bool 1</th>
      <th>Bool 2</th>
      <th>Bool 3</th>
    </thead>
    <tbody>
      <tr *ngFor="let person of people">
        <td>{{person.firstName}}</td>
        <td>{{person.lastName | uppercase}}</td>
        <td>{{person.nickname}}</td>
        <td>{{person.boolean1}}</td>
        <td>{{person.boolean2}}</td>
        <td>{{person.boolean3}}</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="6"><strong>Lorem ipsum dolor sit amet.</strong></td>
      </tr>
    </tfoot>
  </table>
</div>

即使我将窗口缩小到 500 像素宽，在桌面上也能正常工作。在移动设备上，它不会调整大小以适应表格，因此必须侧滚动：

还有一个小问题，用手指调整大小后，纵向模式下导航栏比页面宽度短，但横向模式下没问题：

我必须承认我花了几天时间试图弄明白。所以，不客气。

您可以通过导航至Table Gone Bad Web App 在您的移动设备上重现该问题。

【问题讨论】：

标签： mobile resize bootstrap-5 bootstrap-table angular14

【解决方案1】：

自己找到了解决方案。

这组件.html:

<table id="tbl-players" class="table table-striped table-sm">

样式.css:

@media screen and (max-width: 576px) {
  #tbl-players {
    font-size: 3vw;
  }
}

@media screen and (max-width: 768px) and (min-width: 577px) {
  #tbl-players {
    font-size: 2vw;
  }
}

【讨论】：