1

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.

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; }
}

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.

Bryan
  • 4,628
  • 3
  • 36
  • 62
user9638389
  • 17
  • 1
  • 8

2 Answers2

-1

Will have to use a bit of javascript, mate. This could help you target specific browsers/devices - https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent

Maybe try and implement this example to fit your needs -

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

Hope this helps!

Deme7rius
  • 94
  • 4
-1

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;
  }
}

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

Check the following JsFiddle or snippet:

.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.

Mukyuu
  • 6,436
  • 8
  • 40
  • 59
  • Is there any hack to only target samsung internet as well? – user9638389 Feb 19 '19 at 11:27
  • 2
    Can you elaborate what do you mean by samsung internet? Do you mean browser? If that's so you might want to check https://stackoverflow.com/questions/27439198/how-can-i-address-the-samsung-android-browser. – Mukyuu Feb 19 '19 at 11:36
  • Yes. Sorry for not being clear. I meant the browser. I cannot figure out why and how to change the fact that for some reason the font is bigger on samsung internet than on all the other browsers. I need to set a different font size for only the samsung internet browser it seems, – user9638389 Feb 19 '19 at 12:38
  • This doesn't work on my Pixel 5, probably because this code tests pixel density, instead of the browser vendor or whether it's a mobile platform. Unless pixel density really is the thing that matters, this isn't a reliable solution. – Michael Scheper Oct 18 '21 at 21:33