Question

我有一个基本的前端应用程序（REACT / SASS），该应用程序使用API来显示国家/地区数据。使用chrome inspector时，媒体查询可以在本地运行，也可以在已部署的情况下进行部署，但是当我尝试在手机上查看媒体查询时，没有任何媒体查询有效，这是什么原因造成的？

下面是index.html头

    <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

以下是相关scss的示例

.country-info-ctr {
  display: flex;
  flex-direction: column;
  height: 100%
}

.info-wrapper {
  display: flex;
  flex-direction: row;
  margin: 20px;
  align-items: center;
  // justify-content: space-evenly;
}

.info-ctr {
  display: flex;
  flex-direction: column;
  margin-left: 40px;

}

.country-info-flag {
  height: 500px !important;
  width: 750px !important;
  object-fit: cover;
}

.country-info-name {
  margin-bottom: 20px;
  font-weight: 900;
}

.data-wrapper {
  display: flex;
  align-items: space-around;

}

.data-ctr {
  display: flex;
  flex-direction: column;
  flex: 1;

}

.border-button {
  height: 40px;
  background-color: rgb(218, 218, 218);
  margin: 9px;
  padding: 7px;
}

.border {
  text-decoration: none;
  font-size: 16px;
}

.border-ctr {
  display: flex;
  align-items: center;
}

.home-bttn {
  height: 30px;
  width: 90px;
  margin: 30px 30px 0 30px;
  font-size: 20px;

}

@media (max-device-width: 400px) {

  .country-info-flag {
    height: 240px !important;
    width: 320px !important;
  }

  .info-wrapper {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .info-ctr {
    margin: 20px;
  }

  .data-wrapper {
    display: flex;
    flex-direction: column;
    font-size: 12px;
  }

  .border-ctr {
    display: flex;
    flex-direction: column;
    object-fit: contain;
    position: relative;
    margin-top: 10px;
    margin-bottom: 100px;
  }

  .border-button a {
    height: 10px;
    width: 10px;
    margin: 1px;
    padding: 1px;

  }

  .border {
    font-size: 12px;
  }

}

我在做什么错了？

Answer 1

在我看来，Chrome模拟器和实际设备之间可能存在2种差异。

首先，移动设备可能会忽略重复的viewport元标记。对于每个this question，尽管在多个name标签上具有相同的meta属性是有效的HTML，但某些浏览器/解析器可能无法正确处理它们。在这种情况下，有可能在您的移动设备上仅使用了第二个viewport标签，因此<meta name="viewport" content="width=device-width">被完全忽略了。

您可以尝试将所有内容组合到一个meta标签中，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Chrome模拟器和实际设备上的浏览器之间的第二个潜在差异是max-device-width媒体查询可能不受支持。根据{{3}}，不推荐使用。您应该尝试使用@media (max-width: 400px)

媒体查询只能在检查器中工作，而不能在手机上工作

1 个答案: