媒体查询在浏览器上有效，但在移动设备上不可用

Question

我对Iphone X的媒体查询如下：

@media screen and (min-width: 374px) and (max-width: 376px) and (min-height: 811px) and (max-height: 812px) {
  .welcome-banner {
    background-image: url('~assets/images/landing/welcome-banner-iphonex.jpg');
    background-size: cover;
    background-position: center;
    height: calc(110vh - 64px);
    display: flex;
  }
}

它在Chrome上可以完美运行，但不能在移动设备上使用。我在meta上确实有视口标签：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Answer 1

您的查询似乎正确，但请确保它确实是您testintg需要的设备。您可以使用javascript将以下内容记录到控制台中，以获取正确的跨浏览器@media（宽度）和@media（高度）值：

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
console.log(w,h);