在横向和纵向之间切换会导致媒体查询出现问题

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

您的测试链接现已中断。

除此之外，您还可以在横向媒体查询中使用（方向：纵向）。另外，您是否有理由在媒体查询中使用设备宽度而不仅仅是宽度？我认为您的媒体查询目前过于具体，并且与设备约束相关联，这可能会导致您看到的奇怪渲染。