DIV 元素在 iPhone Chome 和 Safari 上的错误位置中断 - 已确认解决方案

Question

我正在构建一个简单的网络应用程序，但我一生都无法弄清楚它为什么要这样做。在桌面 Chrome 中，设置为 iPhone 12 Pro（我有 13 Pro），显示内容在窗口中显示得绝对完美：

但是当网站部署到 IIS 中时，我在手机上看到了这个（这是我的 iPhone 的屏幕截图）：

按钮位于包含 div 内，CSS 为：

.buttons {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 60vw;
  margin: auto;
}

按钮的具体样式是：

.number {
  width: 15vw;
  height: 15vw;
  margin: 2.5vw;
  font-size: 7.5vw;
  /*border-radius: 20vw;*/
}

这是 HTML 内容，显示布局：

<div class="content">
  <div class="total">
    Sum Total: {{ sumTotal | currency :'GBP':'symbol':'1.2-2' }}
  </div>  
  <div class="list">
    <span class="amount" *ngFor="let values of listOfValues">
      {{ values.amount | currency :'GBP':'symbol':'1.2-2' }} | <i class="bi bi-trash float-right" (click)="remove(values)"></i>
    </span>
  </div>
  <div class="value">
    <div class="symbol">&pound;</div>
    <div class="box">{{ digit5 }}</div>
    <div class="box">{{ digit4 }}</div>
    <div class="box">{{ digit3 }}</div>
    <i class="bi bi-dot"></i>
    <div class="box">{{ digit2 }}</div>
    <div class="box">{{ digit1 }}</div>
  </div>
  <div class="buttons">
    <button class="number" (click)="add('7')">7</button>
    <button class="number" (click)="add('8')">8</button>
    <button class="number" (click)="add('9')">9</button>
    <!-- Break -->
    <button class="number" (click)="add('4')">4</button>
    <button class="number" (click)="add('5')">5</button>
    <button class="number" (click)="add('6')">6</button>
    <!-- Break -->
    <button class="number" (click)="add('1')">1</button>
    <button class="number" (click)="add('2')">2</button>
    <button class="number" (click)="add('3')">3</button>
    <!-- Break -->
    <button class="number" disabled><i class="bi bi-backspace"></i></button>
    <button class="number" (click)="add('0')">0</button>
    <button class="number" (click)="addAmount()"><i class="bi bi-plus-lg"></i></button>
    <!-- Break -->
  </div>
</div>

StackBlitz 上有一个工作演示，它以正确的顺序显示了按钮。

我在手机上缺少 CSS 的东西吗？我不明白为什么它不遵守桌面上的外观。我计算了每个按钮的宽度，然后将 div 宽度设置为其总和，两侧均设置 margin auto。

Answer 1

您需要使用

appearance: none

来防止系统特定的样式。 [参考]

当字体太大时，使用

padding: 0

将文本保持在中心。另外，明确将文本颜色设置为黑色。

.buttons {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 60vw;
  margin: auto;
}

.number {
  width: 15vw;
  height: 15vw;
  margin: 2.5vw;
  
  padding: 0;
  font-size: 7.5vw;
  
  color: black;
  appearance: none;
}

.number[disabled] {
  color: gray;
}

<div class="buttons">
  <button class="number">7</button>
  <button class="number">8</button>
  <button class="number">9</button>
  <!-- Break -->
  <button class="number">4</button>
  <button class="number">5</button>
  <button class="number">6</button>
  <!-- Break -->
  <button class="number">1</button>
  <button class="number">2</button>
  <button class="number">3</button>
  <!-- Break -->
  <button class="number" disabled><</button>
  <button class="number">0</button>
  <button class="number">+</button>
  <!-- Break -->
</div>