响应式网站在 chrome 中远程工作，但不是在它上线时

Question

当我在 127.0.0.1 上的 chrome 中“直播”时，网站库会响应所有尺寸。当我将它上传到实际的域和主机时，所有手机上的画廊都很大。下面是我的代码和 CSS。

* {
    box-sizing: border-box;
  }
  
  img {
    max-width: 100%;
    vertical-align: top;
  }
  
  #gallery {
      display: flex;
      margin: 10px auto;
      max-width: 100%;
      position: relative;
      padding-top: $max-img-height/$max-img-width * 100%;
    }

<section class="gallery">
  <div class="gallery__item">
    <input type="radio" id="img-1" checked name="gallery" class="selector">
    <img class="gallery__img" src="images/p1.jpg" alt=""/>
  </div>
  <div class="gallery__item">
    <input type="radio" id="img-2" name="gallery" class="selector"/>
    <img class="gallery__img" src="images/p2.jpg" alt=""/>
  </div>
</section>

Answer 1

您是否在头部添加了视口的元数据？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />