Опция CSS @media не работает правильно

Question

Я пытаюсь реализовать опцию CSS @media, но у меня возникают некоторые проблемы. У меня есть три варианта, пейзаж, портрет и мобильный. Мобильный телефон активируется только по вертикали, но по горизонтали он не активируется (в основном, используется опция ландшафта).

Вот CSS:

@media (orientation:landscape) { 
/* some css */ 
} 

@media (orientation:portrait) { 
/* some more css */ 
} 

@media mobile { 
/* more css */ 
/* basically the same as vertical */ 
} 

Как сделать это правильно? Я хочу, чтобы мой мобильный вариант был таким же, как мой вариант с портретом.

Answer 1

Вы можете попробовать следующее:

/* Portrait */ 
@media screen and (orientation:portrait) { 
    /* Portrait styles */ 
} 
/* Landscape */ 
@media screen and (orientation:landscape) { 
    /* Landscape styles */ 
} 

для мобильных экранов, я думаю, вам нужно определить минимальное разрешение, как это:

/* 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 */ 
} 

Answer 2

Вы недостающую screen and ...

/* Portrait */ 
@media screen and (orientation:portrait) { 
    /* Portrait styles */ 
} 

/* Landscape */ 
@media screen and (orientation:landscape) { 
    /* Landscape styles */ 
} 

iPhones обычно масштабируют сайт, поэтому вам также нужен этот метатег:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> 

Для айфонов, работающих под управлением версии, прежде чем 4.0, вы можете использовать следующие

/* Portrait */ 
@media screen and (max-width: 320px) { 
    /* Portrait styles */ 
} 

/* Landscape */ 
@media screen and (min-width: 321px) and (max-width: 480px) { 
    /* Landscape styles */ 
}