Потеря соответствия медиа-запросов после переключения портрет-пейзаж-портрет

Question

Я действительно не знаю, что с этим делать, у меня есть таблетка Tab 2, 7 дюймов и использование хром в качестве браузера (v26.0.1410.58) в Android 4.1.1. Я загружаю веб-приложение в портретном режиме, и медиа-запрос подходит просто отлично, я переключу его в альбомный режим, и все работает хорошо, но когда я переключу его обратно в портретный режим, браузер просто не применит стиль, и отладка приложения с помощью USB-планшета, подключенного к ПК, я вижу, что хром больше не нашел соответствия с любым медиа-запросом.

Запрос медиа-я является применение:

(устройство-ширина: 600px) и (макс-устройства высота: 1024px) и (макс-ширина: 600px) и (мин -device высота: 976px) и (ориентация: портрет)

Если проверить ширину устройства и высоту в браузере до и после это произойдет, они не меняют вообще ни.

Некоторые данные, которые могут быть полезны:

screen.width: 600

screen.height: 976

$ (окно) .width(): 600

Это происходит только в этом устройстве, и мне нужно поддерживать приложение на этой вкладке.

Answer 1

У меня нет устройства для тестирования, но я обычно придерживаюсь более простых медиа-запросов.

Возможно, попробуйте только max-width вместо ширины устройства. Я считаю, что выполнение этого в сочетании с макетами, основанными на процентах, означает, что я не привязан к устройствам с моими макетами.

@media (макс-ширина: 600px) {...}

Answer 2

Ориентация медиа-запросы реальная боль, чтобы поддержать ... Я бы посоветовал держаться подальше от них. У меня есть действительно хороший набор медиа-запросов, которые я использую. Я просто отменил запрошенные медиа-запросы Zurb's Foundation. Смотрите ниже ...

// Small screens 
@media only screen { } 
/* Define mobile styles */ 

@media only screen and (max-width: 40em) { } 
/* max-width 640px, mobile-only styles, use when QAing mobile issues */ 

// Medium screens 
@media only screen and (min-width: 40.063em) { } 
/* min-width 641px, medium screens */ 

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } 
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ 

// Large screens 
@media only screen and (min-width: 64.063em) { } 
/* min-width 1025px, large screens */ 

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } 
/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ 

// XLarge screens 
@media only screen and (min-width: 90.063em) { } 
/* min-width 1441px, xlarge screens */ 

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } 
/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ 

// XXLarge screens 
@media only screen and (min-width: 120.063em) { } 
/* min-width 1921px, xxlarge screens */ 

Answer 3

Вы должны попробовать

@media only screen and (max-device-width: 600px) { /* STYLES GO HERE */} 
/* styles apply only in portrait mode */ 

@media only screen and (min-device-width: 601px) { /* STYLES GO HERE */} 
/* styles apply only in landscape mode */ 

Если вам нужен стиль, чтобы работать только в между диапазоном вашего устройства ... Obs: записать бит ориентации только, если вы хотите, чтобы стили применялись в одном из двух.

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

Оставьте другие значения, которые вы указали, это создает конфликт из-за высоты.