在橫向和縱向之間切換導致媒體查詢出現問題

Question

我目前正在研究自適應的新網站。我爲iPad設置了兩個媒體查詢，一個用於肖像，一個用於橫向模式。他們自己工作的很好，但不是從肖像切換到風景時。它顯示的佈局很好，但只是縮小。另一種方式很好，所以可能是什麼問題？

我使用移動HTML5樣板作爲已經覆蓋了視口問題的基礎。那是我認爲造成麻煩的第一件事。

媒體查詢：

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

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

而且實時預覽可在nielspilonwebdesign.nl/dev/niels（在進行的工作）

Answer 1

您的測試鏈接現在打破。

除此之外，您的橫向媒體查詢中有（方向：縱向）。另外，是否有你的媒體查詢使用設備寬度而不是寬度的原因？我認爲您的媒體查詢目前過於具體，並且與設備限制相關，這可能會導致您看到的奇怪渲染。