Html Ipad在方向改变时未应用css

我对iPadSafari的css和方向改变有意见

我在iPadMini上测试，iOS8插在iMac上。iMac上my safari的调试器可以识别方向变化时填充的变化，但它不会应用到ipad的屏幕上。

font size

和

padding

保持不变

在将方向从横向更改为纵向或其他方式时，iPad在重新绘制菜单方面似乎有点懒惰

这是我菜单的DOM结构

<div class="menu">
    <ul id="nice-menu-1">
        <li><a href="/home">Home</a></li>
        <li>
            <span>Dropdown</span>
            <ul style="display:none; visibility:hidden;">
                <li><a href="/someSubLink">First Sub Link</a></li>
                <li><a href="/someOtherSubLink">Second Sub Link</a></li>
            </ul>
        </li>
        <li><a href="/someLink">First Link</a></li>
        <li><a href="/someOtherLink">Second Link</a></li>
    </ul>
</div>

---

编辑：来自iMac safari调试器的一些屏幕截图（在横向中加载页面，从横向更改为纵向）： 调试器显示，正确的规则被识别

但这一变化并不适用

---

我可能把这里搞错了，但这是对的吗

@all and (min-width: 740px) and (min-device-width: 740px),
(max-device-width: 800px) and (min-width: 740px) and (orientation:landscape) {
    #nice-menu-1 li span,
    #nice-menu-1 li a {
        padding:4px 7px;
        font-size:10px;
    }
}

应该是：

@media all and (min-width: 740px) and (min-device-width: 740px),
(max-device-width: 800px) and (min-width: 740px) and (orientation:landscape) {
    #nice-menu-1 li span,
    #nice-menu-1 li a {
        padding:4px 7px;
        font-size:10px;
    }
}

---

我也看到过添加选择器“全部”与“屏幕”与“无”的情况下产生了很大的差异。就在一些人说之前，我有一部iPhone不知怎么的不识别@media屏幕，只识别@media而没有任何选择器。

我只是在ipad/平板电脑上使用以下@media

@media only screen and (max-width: 980px) {.class {font-size:0.526em;}}

对于mobi视图，我只使用

@media only screen and (max-width: 767px) {.class {font-size:0.526em;}}

很好；）

---

我是stackoverflow的新手，需要一些声誉，请给我一些选票D

如上面所写，我认为我的版本是正确的。它说的是

@mediatype和| not | only（媒体功能）{CSS code；}

不是

@all

-你已经在底部媒体查询中写了

@all和
而不是
@media all和
。好的，谢谢。我更正了我的问题，因为这是一个复制粘贴错误。我目前正在处理方向更改时重新加载页面的错误，但这不是一个真正的解决方案。
@media only screen and (max-width: 767px) {.class {font-size:0.526em;}}