css media query, переключение между ориентациями разрывает макет

Question

, имеющий странную ошибку. Когда я запускаю свой планшет (используя модель Nexys 7 2013) в портрете, он загружает правильную таблицу стилей, и когда я переключаюсь на пейзаж, он загружает , что верную таблицу стилей, но затем, когда я переключаю назад на портрет, он больше не загружает таблицу стилей портрета. Что дает?

Relavant код:

<link rel="stylesheet" type="text/css" 
     media="only screen and (max-device-width: 800px) and (-webkit-min-device-pixel-ratio: 2.0) and (orientation: portrait)" 
     href="tablet_portrait.css"> 
<link rel="stylesheet" type="text/css" 
     media="only screen and (max-device-width: 800px) and (-webkit-min-device-pixel-ratio: 2.0) and (orientation: landscape)" 
     href="tablet_landscape.css"> 

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

Спасибо!

Answer 1

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

@media="only screen and (max-device-width: 800px) and (-webkit-min-device-pixel-ratio: 2.0) and (orientation: portrait) { 
    styles here... 
} 

@media="only screen and (max-device-width: 800px) and (-webkit-min-device-pixel-ratio: 2.0) and (orientation: portrait) { 
    styles here... 
}