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

【问题标题】：How to target only google chrome on mobile using css media queries如何使用 CSS 媒体查询在移动设备上仅定位谷歌浏览器
【发布时间】：2019-02-19 18:40:55
【问题描述】：

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

我已经尝试以下方法在移动设备上定位谷歌浏览器：

@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 mobile，但我定位所有移动浏览器。例如，如果我离开 (max-width: 37.em)，我的目标也是 pc。

【问题讨论】：

标签： css media-queries

【解决方案1】：

我已经在 Microsoft Edge 42.17134.1.0、Firefox 65.0（64 位）和 Chrome 版本 72.0.3626.81（官方版本）（64 位）中测试了以下代码，它在 Chrome 中按预期工作。

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  .selector:not(*:root), .chrome {
    color: green;
  }
}

注意.chrome是一个类名，你可以换成其他类名。

检查以下JsFiddle或sn-p：

.test {color:red;}

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
  .selector:not(*:root), .chrome {
    color: green;
  }
}

&lt;p class="test chrome"&gt;I Should be Green if you're in chrome, Red in all other browsers&lt;/p&gt;

如果可行，您可以从此处详细说明。

【讨论】：

是否有任何黑客也只针对三星互联网？
你能详细说明你所说的三星互联网是什么意思吗？你是说浏览器吗？如果是这样，您可能需要检查stackoverflow.com/questions/27439198/…。
是的。抱歉不清楚。我说的是浏览器。我无法弄清楚为什么以及如何改变由于某种原因三星互联网上的字体比所有其他浏览器上的字体更大的事实。我似乎只需要为三星互联网浏览器设置不同的字体大小，
这在我的 Pixel 5 上不起作用，可能是因为此代码测试像素密度，而不是浏览器供应商或它是否是移动平台。除非像素密度真的很重要，否则这不是一个可靠的解决方案。

【解决方案2】：

将不得不使用一点 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*/ }

希望这会有所帮助！

【讨论】：