Почему @media (min-width:768px)and(orientation:portrait) не работает?

Question

[XXXuser]

Здравствуйте!
Есть CSS:

@media(orientation:portrait){.box1{display:none;}}
@media(orientation:landscape){.box2{display:none;}}
@media (min-width:768px) and (orientation:portrait) {.box1{display:block;}.box2{display:none;}}

Последняя строчка игнорируется, работает только первое условие --(min-width:768px)--
Господа, что я делаю не так?

Comments

[Destell]

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width: 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width: 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width: 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width: 1824px) {
  /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles */
}

<a href="https://toster.ru/q/210875">Отсюда</a>

Отсюда

[Сергей delphinpro]

Потому что в портретном режиме у вашего устройства ширина меньше 768 пикселей. Например 600.

[Сергей delphinpro]

Может вы там хотели написать max-width ?

[Евгений]

Я конечно не силен, но кажется логичным условие убрать в скобки
((min-width:768px) and (orientation:portrait))

[XXXuser]

Сергей delphinpro, нет, это для айпадов например

[Сергей delphinpro]

XXXuser, и проверяете на айпаде?

[XXXuser]

Сергей delphinpro, нет, проверяю в хроме

[XXXuser]

не уверен, что разобрался, но со строчкой

<meta name="viewport" content="width=device-width">

вроде работает

[Сергей]

XXXuser, так без этого и не должно работать