css只在android和IOS上的肖像模式

Question

我的网络应用程序只能在手机上以纵向模式工作，但现在我遇到了2个问题。

在电脑上

webapp没有显示，因为电脑处于横向模式，我该如何解决这个问题？

第二个问题是需要修复的最重要的问题，如果我在手机上使用键盘，则内容不可显示。它向我展示了景观div。

#landscape {
display: none;
}
@media only screen and (orientation:portrait){
    #wrapper {
        display:block;
    }
}
@media only screen and (orientation:landscape){
    #wrapper {
        display:none;
    }
    #landscape{
        display: block;
    }
}

谁知道这个问题？

Answer 1

1. 为具有最小宽度的桌面添加第二个媒体查询，以便不捕获较小的设备。

例如。 @media掌上电脑和（最小宽度：20em），屏幕和（最小宽度：20em）