响应式设计在浏览器中工作，而不在Landscape Ipad中

Question

@media only screen 
and (min-device-width: 980px) 
and (max-device-width: 1024px) 
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 1) {
#menu {
    display: none;  
}

#mobile-nav {
    display: block;
    float: right;
}

#mobilemenu{
display:block;
}

#navigation-mobile{
    margin-left: 0px;
    margin-right: 0px;
    padding-left:0px;
    padding-right:0px;  
}
}

我用来在我的网页上设置列表样式的上述代码在浏览器上工作，如果我检查元素并使用谷歌浏览器查看更改，但是当我尝试在横向模式下测试我的ipad时，列表项会中断，是否存在一种通过ipad上的媒体查询解决这个问题的方法吗？

Answer 1

对于横向使用的ipad

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}