iPhone 尝试将所有内容压缩到一页上

Question

我一直在做一个网站，一切都很顺利，直到有人尝试在他们的 iPhone 上进行测试。 iPhone 上的所有内容似乎都被挤压到了屏幕上。这发生在 Safari、Chrome 和 Duck Duck Go 中。我无法在我在互联网上尝试过的任何 iPhone 模拟器中重现该问题，但在我测试过的两个 iPhone 模拟器上都看到了该问题。

这是 iPhone 上的样子：iPhone image

这是我的 android 上的样子：Android image

布局广泛使用 flexbox，我的研究使我相信这是问题所在。我已经尝试将此 css 添加到我的 css 文件的底部以防止 flexboxes 收缩，但它并没有解决问题：

* {
    flex-shrink: 0;
}

如果您需要更多源代码，请告诉我，但由于问题遍及整个页面，我将不得不 post 全部。

编辑：这是 css https://pastebin.com/c0VjkGDc

的 pastebin

编辑 2：这是一张卡片中 HTML 的示例，它似乎在 iPhone 上被压扁（忽略 php）：

<div class='container'>
<div class='results-container'>
<div class='result-card'>
  <div class='card-date'>
    <div class='month'>{$date_month}</div>
    <div class='day'>{$date_day}</div>
    <div class='year'>{$date_year}</div>
  </div>
  <div class='card-info'>
    <div class='card-title'>{$aud_position}</div>
    <div class='card-subtitle'>{$aud_name}</div>
    <div class='card-location'><i class="fas fa-map-marker-alt"></i> {$aud_location}</div>
    <div class='card-pay'><span class='pay-span'>{$aud_pay}</span></div>
    <div class='card-icons'>
      <i class='icon-red fas fa-clock'></i> App deadline passed
    </div>
  </div>
  <div class='card-actions'>
    <div class='card-fave'><i class="fas fa-heart"></i></div>
  </div>
</div>
</div>
</div>

这里是相关的CSS：

.container {
  display: flex;
}

.results-container {
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.result-card {
  flex: 1;
  display: flex;
  margin-top: 5px;
  background-color: white;
  padding: 15px;
}

.card-date {
  flex: 0 0 5em;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ddd;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.day {
  font-size: 2em;
}

.card-info {
  padding-left: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.5em;
}

.card-title {
  font-weight: bold;
  font-size: 1.1em;
}

.card-pay {
  margin: 10px 0;
}

.pay-span {
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 10px;
  border: 1px solid #ddd;
}
* {
  flex-shrink: 0;
}

Answer 1

如上题评论所述，原文HTML和CSS错误较多。要验证和修复错误，可以使用以下在线资源：

W3 HTML 验证者：https://validator.w3.org/nu/
W3 CSS 验证者：https://jigsaw.w3.org/css-validator/

另一方面，如果您在您的网站中应用 Bootstrap responsive framework，它可以为您省去很多处理不同屏幕尺寸的工作。

iPhone 尝试将所有内容压缩到一页上

iPhone tries to squish everything onto one page

html

css

iphone

shrink

flexbox