Как настроить таргетинг только на Google Chrome на мобильных устройствах с помощью CSS-запросов - PullRequest
Новая
       54

Как настроить таргетинг только на Google Chrome на мобильных устройствах с помощью CSS-запросов

0 голосов
/ 19 февраля 2019

Я создаю персональный веб-сайт и использую сетку CSS для отображения каждого раздела страницы с фиксированной высотой 100vh.Все работает нормально, пока я не протестирую Google Chrome на мобильном телефоне.Я понимаю, что Google Chrome включает в себя навигационную панель с 100vh, поэтому я рассчитываю это с 100vh.Это работает, но это также относится ко всем браузерам, мобильным и ПК.Я хочу, чтобы он применялся только к Google Chrome на мобильных устройствах.

Я уже пробовал выполнить следующие действия, чтобы настроить таргетинг на Google Chrome на мобильных устройствах: 

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

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Я протестировал следующий код в 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 или фрагмент: 

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

Здесь вы можете подробнее рассказать, если это работает.

0 голосов
/ 19 февраля 2019

Придется использовать немного 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*/ }

Надеюсь, это поможет!

...