html - HDPI 和 MDPI 笔记本电脑屏幕的媒体查询不起作用

Question

我必须为 HDPI 和 MDPI 屏幕的元素应用不同的属性。我尝试了以下代码，但它仅适用于 HDPI，不适用于 MDPI。

@media screen and (min-width: 900px) {
  .myClass {
    margin-left: 34%;
  }
}
@media screen and (max-width: 899px) and (min-width: 500px) {
  .myClass {
    margin-left: 43%;
  }
}

此处媒体屏幕最小宽度 990px​​(HDPI) 有效，但对于其他媒体屏幕无效。我应该怎么做？

Answer 1

/* (ldpi) Android*/
@media only screen and (-webkit-device-pixel-ratio:.75){
  /* CSS  */
}

/* (mdpi) Android*/
@media only screen and (min-device-width : 480px) and (max-device-width : 800px) {
  /* CSS  */
}

/* (hdpi) Android*/
@media only screen and (-webkit-device-pixel-ratio:1.5){
  /* CSS  */
}

Reference 1

Reference 2