Медиа-запросы - не отвечает на устройствах - PullRequest
Новая
       70

Медиа-запросы - не отвечает на устройствах

0 голосов
/ 29 мая 2020 
@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

Ответы [ 3 ]

0 голосов
/ 29 мая 2020

Удалите! Important и добавьте}. Также используйте @media all как это 

@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;
    } 
}

сработало?

0 голосов
/ 29 мая 2020

Пожалуйста, введите этот код и проверьте. 

@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. Есть метатег или нет. Если нет, то вставьте это в свою голову. 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
0 голосов
/ 29 мая 2020

В обоих ваших запросах вам, кажется, не хватает } 

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