如何通过CSS媒体查询仅针对移动端Google Chrome

这个问题太典型了——移动端Chrome的100vh行为一直是个坑，它会把顶部地址栏和底部操作栏算进视口高度里，导致你的固定高度区块被遮挡。你之前尝试的媒体查询之所以范围太广，是因为-webkit-min-device-pixel-ratio:0会命中所有WebKit内核的浏览器（包括移动端Safari、PC端Chrome），加上宽度限制也没法精准区分Chrome和其他移动端WebKit浏览器。

下面给你两个可行的方案，从纯CSS到更可靠的JS方案都有：

方案一：纯CSS精准命中（接近完美） #

我们可以结合触摸设备检测、WebKit属性支持和排除其他浏览器的条件，尽可能缩小目标范围：

.container {
  background-color: $color-layout;
  display: grid;
  grid-template-rows: repeat(3, 100vh) 80vh 20vh;
  grid-template-columns: 8rem repeat(4, 1fr) 8rem;
}

/* 仅针对移动端Chrome的样式 */
@media only screen and (max-width: 37.5em) and (pointer: coarse) {
  /* 排除非WebKit和微软浏览器，同时利用Chrome支持的特定属性 */
  @supports (-webkit-touch-callout: none) and (not (-ms-ime-align: auto)) and (selector(:-webkit-scrollbar)) {
    .container {
      grid-template-rows: repeat(3, calc(100vh - 56px)) calc(80vh - 56px) 20vh;
    }
  }
}

解释一下：

• pointer: coarse确保是触摸设备，排除PC端；
• -webkit-touch-callout: none筛选WebKit内核浏览器；
• not (-ms-ime-align: auto)排除Edge等微软系浏览器；
• selector(:-webkit-scrollbar)利用移动端Chrome支持自定义滚动条，而Safari移动端不支持的特性，进一步区分两者。

不过这个方案还是存在极小概率的误判（比如某些基于Chrome的小众浏览器），如果要100%精准，推荐方案二。

方案二：JS检测+动态视口高度（最可靠） #

通过JS检测用户代理确认是移动端Chrome，然后添加专属类，同时动态计算实际可用视口高度（避免硬编码56px，因为Chrome工具栏高度会随状态变化）：

第一步：添加JS检测代码

// 检测是否为移动端Chrome
function isMobileChrome() {
  const userAgent = navigator.userAgent;
  // 匹配Chrome、移动端，排除Edge和Safari
  return /Chrome/i.test(userAgent) && 
         /Mobile/i.test(userAgent) && 
         !/Edge/i.test(userAgent) && 
         !/Safari/i.test(userAgent);
}

// 动态设置实际视口高度变量
function setViewportHeight() {
  document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`);
}

// 初始化和监听变化
setViewportHeight();
window.addEventListener('resize', setViewportHeight);
window.addEventListener('orientationchange', setViewportHeight);

// 如果是移动端Chrome，添加专属类
if (isMobileChrome()) {
  document.documentElement.classList.add('is-mobile-chrome');
}

第二步：修改CSS样式

.container {
  background-color: $color-layout;
  display: grid;
  grid-template-rows: repeat(3, 100vh) 80vh 20vh;
  grid-template-columns: 8rem repeat(4, 1fr) 8rem;
}

/* 仅针对移动端Chrome应用调整 */
@media only screen and (max-width: 37.5em) {
  .is-mobile-chrome .container {
    // 使用动态计算的视口高度，替代硬编码的100vh-56px
    grid-template-rows: repeat(3, var(--viewport-height)) calc(var(--viewport-height) * 0.8) 20vh;
  }
}

这个方案的优势：

1. 100%精准命中移动端Chrome，不会影响其他浏览器；
2. 动态计算视口高度，适配Chrome工具栏显示/隐藏的状态变化，避免内容被遮挡或出现空白。

补充说明 #

硬编码56px的问题在于，Chrome移动端的工具栏高度在不同设备或状态下可能不同（比如横屏时高度变化），用window.innerHeight获取实际可用高度是更稳妥的做法。

内容的提问来源于stack exchange，提问作者user9638389