Элементы CSS, скрытые на iPad

Question

Я создал два класса css (hidedesktop и hideonmobile), чтобы я мог выборочно скрыть элементы в зависимости от того, был ли пользователь на рабочем столе или мобильном устройстве.

Но я заметил, что элементы с любым классом не отображаются на iPad в портретной ориентации, несмотря на то, что они отлично работают на настольной, мобильной и альбомной ориентации. Есть ли у кого-нибудь советы о том, как преодолеть это?

@media only screen and (min-width: 768px) { 
.hidedesktop{ display: none; } 
} 

@media (max-width: 768px) { 
.hideonmobile{ display: none; } 
} 

Answer 1

Попробуйте

@media screen and (min-width: 768px) { 
     .hidedesktop{ display: none; } 
     .hideonmobile{ display: block; } 
    } 

    @media screen and(max-width: 768px) { 
     .hideonmobile{ display: none; } 
     .hidedesktop{ display: block; } 
    } 

Answer 2

Оба ваших медиа-запросов будут прятаться 768px элементы. Первое значение зависит от вашего запроса min-width СМИ является 768px и последнее значение запроса max-width медиа является 768px

Установите мобильный макс ширину в 767px и ваш рабочий стол мин-ширина до чего-то большего т.е. 992px так что вы медиа-запросы становятся

@media screen and (min-width: 992px) { 
.hidedesktop{ display: none; } 
} 

@media screen and(max-width: 767px) { 
.hideonmobile{ display: none; } 
}