css - 如何使用 css 媒体查询在移动设备上仅定位谷歌浏览器

Question

我正在创建一个个人网站，我正在使用 css 网格以 100vh 的固定高度显示页面的每个部分。一切正常，直到我在手机上测试谷歌浏览器。我知道谷歌浏览器包括它的导航栏和 100vh，所以我用 100vh 计算它。它有效，但它也适用于所有浏览器、移动设备和 pc。我希望它仅适用于移动设备上的谷歌浏览器。

我已经尝试过以下方法来定位移动设备上的谷歌浏览器:

@media only screen and (-webkit-min-device-pixel-ratio:0)

@media only screen and (-webkit-min-device-pixel-ratio:0) and (min- 
resolution:.001dpcm)

@media only screen and (-webkit-min-device-pixel-ratio:0) and (min- 
resolution:.001dpcm) and (max-width:  37.5em ) //To target only mobile

@media screen and(-webkit-min-device-pixel-ratio:0) {
 .container {-chrome-:only(;
 property: value;;
) ;}
} //this is giving me a syntax error


.container {
  background-color: $color-layout;
  display: grid;
  grid-template-rows:  repeat(3, 100vh) 80vh 20vh;
  grid-template-columns: 8rem repeat(4, 1fr) 8rem;
   @media only screen and (-webkit-min-device-pixel-ratio:0) and 
   (min-resolution:.001dpcm) and (max-width:  37.5em ) { grid- 
   template-rows:  repeat( 3, calc(100vh - 56px)) calc(80vh - 56px) 
   20vh; }
}

我应该只使用此代码定位 google chrome 移动版，但我定位所有移动浏览器。例如，如果我离开 (max-width: 37.em)，我的目标也是 pc。

Answer 1

将不得不使用一些javascript，伙计。这可以帮助您针对特定的浏览器/设备 - https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent

也许尝试并实现这个例子来满足您的需求-

    if (navigator.userAgent.indexOf("Chrome") !== -1){
// YES, the user is suspected to support look-behind regexps 
} else { /*put your old fall back code here*/ }

希望这对您有所帮助!