媒体查询-在设备上不响应

Question

@media screen (max-width: 750px) or (screen and (max-width: 750px) (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)) {  
        div.body, div.body div.links, div.body div.links div, div.footer, div.footer div {      
            display: block !important;      
            overflow: hidden !important;
}

另一个版本

@media screen and (max-width: 750px) {  
        div.body, div.body div.links, div.body div.links div, div.footer, div.footer div, table, td, tr{      
            display: block !important;      
            overflow: hidden !important;
        } 

大家好，

以上是我对我的代码的媒体查询。该代码用于新闻通讯，由于某种原因，媒体查询将不会发送到移动设备。媒体查询中我缺少什么吗？我要测试的手机是iPhone XR。

非常感谢！

Dom

Answer 1

在您的两个查询中，您似乎都缺少}

@media screen (max-width: 750px) or (screen and (max-width: 750px) (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)) {  
  div.body, div.body div.links, div.body div.links div, div.footer, div.footer div {      
     display: block !important;      
     overflow: hidden !important;
  }
}


@media screen and (max-width: 750px) {  
   div.body, div.body div.links, div.body div.links div, div.footer, div.footer div, table, td, tr{      
      display: block !important;      
      overflow: hidden !important;
   }
} 

Answer 2

请删除！important并添加一个}。也请使用@media像这样

@media all and (max-width: 750px) {  
    div.body, div.body div.links, div.body div.links div, div.footer, div.footer div, table, td, tr{      
        display: block;      
        overflow: hidden;
    } 
}

它起作用了吗？

Answer 3

@media only screen and (max-width: 751px) {
   div.body, div.body div.links, div.body div.links div, div.footer, div.footer div, table, td, tr{      
        display: block !important;      
        overflow: hidden !important;
    } 
}

请输入此代码并检查。还要检查html中的标头。是否有中继标记