Ipad没有在方向改变上应用css

Question

我遇到了iPad Safari的CSS和方向更改问题。

我在iPad mini上测试了iOS8插入iMac。我在iMac上的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>

这是我的CSS

#nice-menu-1 {
    width:100%;
}

#nice-menu-1 li {
    display:block;
    float:left;
    margin: 0 1px 4px 0;
    padding:0;
}

#nice-menu-1 li span,
#nice-menu-1 li a {
    display:table-cell;
    cursor:pointer;
}

@media all and (min-width: 980px) and (min-device-width: 980px),
all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape) {
    #nice-menu-1 li span,
    #nice-menu-1 li a {
        padding:4px 14px;
        font-size:12px;
    }
}

@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;
    }
}

---

编辑：来自iMac safari调试器的一些屏幕截图（横向加载的页面，从横向更改为纵向）：

调试器显示正确的规则被识别

但是没有应用更改

Answer 1

我可能会在这里混淆，但这是正确的吗？

@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;
    }
}

我还看到过添加选择器＆＃34; all＆＃34;与＆＃34;屏幕＆＃34;没有什么比这更大的了。只是有些人说我以前有一部iPhone不知道@media屏幕，只有@media没有任何选择器。

Answer 2

我只使用以下@media for ipad / tablet

@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