CSS для определения браузера и разрешения экрана

Question

Есть ли способ определить разрешение браузера и экрана и настроить высоту оболочки и прокрутку дисплея, пытаясь выполнить ниже, но не работает,

    @media screen and (-webkit-min-device-pixel-ratio:0) {
      .wrapper {
        height: 60vh;
        position: relative;
        background-color: white;

         
      }

      @media (resolution: 150dpi) {
        .wrapper {
          height: 55vh;
          position: relative;
          background-color: white;
      
      
           
        
      }
      
        .ms-ScrollablePane--contentContainer{
      
          overflow-x:visible;
      
      
        }
      }
      

Answer 1

Я не уверен, что смогу обнаружить браузер через CSS, для этого может потребоваться JS.

Что касается определения ширины экрана, хотя я предполагаю, что размер экрана вызван настольное / мобильное устройство, в таком случае измените

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

на

Desktop

@media screen and (min-width: desired width) {

Mobile

@media screen and (max-width: desired width) {