iPhone上的CSS边距与桌面和浏览器堆栈上的不同

dphi5xsq  于 2023-04-13  发布在  其他
关注(0)|答案(1)|浏览(112)

所以我知道当涉及到特定的CSS样式时,浏览器和设备之间会有不一致的地方,但这一点尤其令我困惑。
我经常将margin-right设置为20 px,在我的媒体查询中我将其调整为30 px。然而,由于某种原因,我在图像和它右边的文本之间没有空间。
以下是它在我的手机(iPhone 12)上的显示:

以下是它在相同型号和iOS版本的Browserstack上的显示方式:

最后,它在桌面上:

所以我的问题是我不知道有什么其他方法可以检查什么可能会取消这种风格。
Link to the site
此组件的完整CSS:

.home-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-content {
  flex-grow: 0.6;
}

.intro-text-section {
  margin-bottom: 20px;
  flex-grow: 0.6;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bot {
  border: 1px solid;
  border-color: #000000;
  border-radius: 10px;
  margin-bottom: 10px;
  padding-top: 5px;
  padding-left: 5px;
  background-color: white;
  color: #000000;
  height: 265px;

  /* below is to vertically align */
  position: relative;
}

.icon-img {
  height: 235px;
  width: 235px;
  border-radius: 18px;
  margin-right: 20px;
  padding-top: 10px;
}

.bot-description {
  font-size: 14px;
  font-weight: 500;
  display: inline;
  /* below is to vertically align */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.bot-name {
  font-weight: 600;
  margin-bottom: 8px; /* this is to override the Angular Material h3 setting */
}

.bot-actions {
  margin-top: 10px;
  margin-bottom: 10px;
}

.bot-button-link {
  text-decoration: none;
  margin-right: 10px;
  margin-top: 10px;
  width: 138px;
}

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) {
  .bot {
    border-radius: 10px;
    margin-bottom: 10px;
    padding-top: 5px;
    padding-left: 5px;
    height: 275px;

    /* below is to vertically align */
    position: relative;
  }

  .icon-img {
    height: 130px;
    width: 130px;
    border-radius: 18px;
    margin-right: 30px;
    padding-top: 10px;
  }
}

@media only screen and (max-device-width: 320px) {
  .bot {
    border-radius: 10px;
    margin-bottom: 10px;
    padding-top: 5px;
    padding-left: 5px;
    height: 365px;
  }

  .icon-img {
    height: 130px;
    width: 130px;
    border-radius: 18px;
    margin-right: 12px;
    padding-top: 10px;
  }
}
cngwdvgl

cngwdvgl1#

为您创建了一个flex实现起点:

.bot {
  display: flex;
  align-items: center;
  padding: 10px;
  border: solid 1px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.icon-img {
  flex: none;
  width: 235px;
  height: 235px;
  object-fit: contain;
  margin-right: 20px;
  border-radius: 10px;
}

@media (max-width: 767px) {
  .icon-img {
    width: 130px;
    height: 130px;
  }
}

.bot-description {
  flex: auto;
  min-width: 1px;
}
<div class="bot">
  <img src="https://rardk64.com/assets/timezonebot.jpg" class="icon-img" alt="">
  <div class="bot-description">Your html description is here</div>
</div>

相关问题