Question

我正在一个网站上工作，但是它需要针对iPad上的Chrome的某些特定样式。网站上的内容太长，无法满足iPad上Chrome浏览器的高度要求。它可以在iPad上的Safari上正常运行，但是由于Chrome浏览器占据了顶部栏的更多空间，因此我必须使用专门针对Chrome的媒体查询，但似乎无法使其正常工作。

我尝试了两种嵌套方式，使用逗号分隔符并进行了一次长媒体查询，但似乎没有一个仅针对iPad上的Chrome（请参见我的代码示例）。


@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) 
and (-webkit-min-device-pixel-ratio:0) 
and (min-resolution:.001dpcm)  {
   .column.layout-column {
      max-height:85vh;
   }
}


@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait),
screen and (-webkit-min-device-pixel-ratio:0) 
and (min-resolution:.001dpcm)  {
   .column.layout-column {
      max-height:85vh;
   }
}


@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) {
   @media screen
   and (-webkit-min-device-pixel-ratio:0)
   and (min-resolution:.001dpcm) {
      .column.layout-column {
         max-height:85vh;
      }
   }

}

我只想更改此div的高度，特别是在iPad上的Chrome（而不是台式机）上。我也尝试交换最后一个示例（因此大小查询将在Chrome查询中）

如何专门在iPad上定位Chrome

0 个答案: