奇怪的移动 css 行为

Question

我有一个基本的 CSS 照片库，它在桌面设备上运行良好，如果我在 Mozilla 响应式设计模式或此 CodePen 中模拟移动视图也能正常运行，但似乎无法正常运行在真实的移动设备上。

:root {
  --blue: #6483B2ff;
  --dark-blue: #1d3557;
  --light-blue: #e1e5f2;
  --white: #ffffff;
  --flag-blue: #0038B8;
  --error: #660000;
}

#gallery {
  margin: 3em 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#gallery .quote {
  text-align: center;
}

#gallery .gallery-layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  background: var(--light-blue);
  border-radius: 15px;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 20px;
}

#gallery .gallery-layout #gallery-items {
  display: none;
}

#gallery .gallery-layout .frame {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

#gallery .gallery-layout .frame .overlay {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  width: 100%;
  height: auto;
  background: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
}

#gallery .gallery-layout .frame .overlay .overlay-text {
  color: var(--white);
  padding: 10px;
  font-size: 1rem;
  font-variant: small-caps;
  letter-spacing: 1px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  text-align: center;
}

#gallery .gallery-layout .prev-pic, #gallery .gallery-layout .next-pic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 10px;
}

#gallery .gallery-layout .prev-pic i, #gallery .gallery-layout .next-pic i {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--dark-blue);
  width: 100%;
  height: 150px;
  padding: 5px;
}

#gallery .gallery-layout .prev-pic i:hover, #gallery .gallery-layout .next-pic i:hover {
  border-radius: 5px;
  background: var(--dark-blue);
  color: var(--light-blue);
  opacity: 0.7;
  cursor: pointer;
}

#gallery .gallery-layout i.dl-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#gallery .gallery-layout i.dl-2 {
  display: none;
}

@media screen and (max-width: 800px) {
  #gallery .gallery-layout {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0 20px;
  }
  #gallery .gallery-layout .prev-pic, #gallery .gallery-layout .next-pic {
    width: 100%;
    max-width: 150px;
  }
  #gallery .gallery-layout i.dl-1 {
    display: none;
  }
  #gallery .gallery-layout i.dl-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
    <title>Document</title>
</head>
<body>
<div id="gallery">
            <div class="gallery-layout">
                <div class="prev-pic"><i class="small material-icons dl-1">navigate_before</i><i class="small material-icons dl-2">keyboard_arrow_up</i></div>
                <div class="frame" data-id="1">
                    <img class="responsive-img" src="https://images.unsplash.com/photo-1547483029-77784da27709">
                    <div class="overlay"><span class="overlay-text">Dummy description</span></div>
                </div>
                <div class="next-pic"><i class="small material-icons dl-1">navigate_next</i><i class="small material-icons dl-2">keyboard_arrow_down</i></div>
            </div>
        </div>
</body>
</html>

在真实的移动设备上看起来像这样（使用不同的浏览器测试）：

Answer 1

flex children 默认设置为拉伸。而当你的child，也就是img标签设置为“height:auto;”。它伸展。

您可以使用“align-items”属性更改该行为。

#gallery .gallery-layout .frame {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;

  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

}

奇怪的移动 css 行为

Strange mobile css behavior

html

css

mobile

image

responsive