javascript - 媒体查询适用于浏览器，但不适用于移动设备

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 上确实有视口(viewport)标签:

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

Answer 1

您的查询似乎是正确的，但请确保它确实是您正在测试的设备所需要的。您可以通过使用 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);

同时重新检查 initial-scale 元和缩放，它们可能会弄乱您的设备视口(viewport)。

此外，该查询非常具体。如果你只是 - 我的意思是只是 - 想要定位这个设备那么没关系，但是对于更多的全局查询来说可能更好，我通常定位 320 和 767(比旧的 Ipad 小)，如果需要的话可能是 480。