如何使用CSS媒体查询在移动设备上仅定位Google Chrome [英] How to target only google chrome on mobile using css media queries

问题描述

我正在创建一个个人网站，并且正在使用CSS网格显示固定高度为100vh的页面的每个部分.一切正常，直到我在移动设备上测试google chrome.我了解google chrome包含100vh的导航栏，因此我以100vh进行计算.它可以工作，但也适用于所有浏览器，移动设备和PC.我希望它仅适用于移动设备上的Google Chrome.

I am creating a personal website and I am using css grid to display each section of the page with a fixed height of 100vh. Everything works fine until I test google chrome on mobile. I understand that google chrome includes it's nav bar with the 100vh so I calculate that with the 100vh. It works, but it also applies to all browsers, mobile and pc. I want it to apply to only google chrome on mobile.

我已经尝试了以下方法来针对移动设备上的google chrome:

I have already tried the following to target google chrome on mobile:

@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移动设备，但我定位所有移动浏览器.例如，如果我离开(最大宽度:37.em)，我也会定位pc.

I should only target google chrome mobile with this code but I target all mobile browsers. And if I leave (max-width: 37.em) for example, I target also pc.

推荐答案

我已经在Microsoft Edge 42.17134.1.0，Firefox 65.0(64位)和Chrome版本72.0.3626.81(官方内部版本)中测试了以下代码(64位)，并且可以在Chrome浏览器中正常工作.

I've tested the following code in Microsoft Edge 42.17134.1.0, Firefox 65.0 (64-bit), and Chrome Version 72.0.3626.81 (Official Build) (64-bit) and it works as expected in Chrome.

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

请注意， .chrome 是一个类名，您可以使用其他类名进行更改.

Note that .chrome is a class name and you can change with other class names.

检查以下 JsFiddle 或代码段:

.test {color:red;}

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

<p class="test chrome">I Should be Green if you're in chrome, Red in all other browsers</p>

如果可行，您可以在这里详细说明.

You can elaborate more from here on if it works.

这篇关于如何使用CSS媒体查询在移动设备上仅定位Google Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！