Медиа-запросы в CSS не работают между устройствами

Question

Я использовал дополнение Responsive Web Designer в Chrome, чтобы проверить нацеливание на 320 x 480, 480 x 320, 600 x 800, 800 x 600, 768 x 1024 и 1024 x 768.

Я использовал:

@media screen and (max-width: 480px){ my code }
@media screen and (max-width: 320px){ my code }

... структура, чтобы сделать эти сайты отзывчивыми.

Когда я проверяю эти макеты, это хорошо работает браузер. Когда я получаю реальное устройство, такое как Samsung Galaxy Core Prime в портретном режиме, оно мне хорошо показывает. Но в ландшафтном режиме это не дает мне выравнивание должным образом.

Кроме того, когда я проверяю свой сайт с другого устройства, у которого есть экран размера порта обзора 360 ширины, медиа-запросы, которые я написал для 480, не влияют на это.

Я хотел бы, чтобы код, который я написал для 480, применялся к устройству между 320 и 480 устройствами.

Что я тут не так сделал?

Answer 1

@media screen будет работать только на определенных экранах, поэтому некоторые устройства с разными размерами могут пропустить

Используйте это вместо

@media all and (max-width: 480px){ my code }
@media all and (max-width: 320px){ my code }

Answer 2

@media all and (max-width: 480px) and (min-width 321px){ my code }
@media all and (max-width: 320px){ my code }