Css 响应性设计在浏览器中工作，而不是在横向Ipad中

如果我检查元素并使用google chrome查看更改，我用于在网页上设置列表样式的上述代码在浏览器上工作，但当我尝试在ipad上以横向模式进行测试时，列表项中断，有没有办法通过在ipad上的媒体查询来解决此问题？

适用于横向使用的ipad

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

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