时间戳

首页 > 解决方案 > iPhone试图将所有内容压缩到一页上

html - iPhone试图将所有内容压缩到一页上

问题描述

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

这是它在 iPhone 上的样子：iPhone 图像

这是它在我的 android 上的样子：Android 图像

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

* {
    flex-shrink: 0;
}

如果您需要更多源代码，请告诉我，但由于问题出在整个页面上，我必须将其全部发布。

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

编辑 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;
}

标签： htmlcssiphoneflexboxshrink

解决方案

正如上面问题的评论中提到的，原始的 HTML 和 CSS 包含相当多的错误。要验证和修复错误，可以使用以下在线资源：

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

推荐阅读