Html 用CSS处理媒体查询

我有这样的问题：
在我的css文件中有两个媒体查询，它们是通过视口高度应用的，因为两部手机上的宽度相同，但我在html中有一个输入，所以当我点击它并打开键盘时，视口高度降低，第二个查询也被应用。这是片段。 我想在iphone 5上应用第一个查询，不管键盘是否打开

#div{
高度：20px；
}
@介质（最大高度：568px）和（最大宽度：320px）{
/*e、 g iphone 5*/
#div{
背景色：红色；
}
}
@介质（最大高度：480px）和（最大宽度：320px）{
/*e、 g iphone 4*/
#div{
背景颜色：蓝色；
}
}

反应敏捷的

也将此添加到您的媒体查询中

仅屏幕

我认为它将修复您的问题problem@xmaster我认为问题在于，当键盘打开时，屏幕尺寸会发生变化。

仅屏幕

是否解释了这一点？@D\N我认为它不起作用。你能添加一张图片吗？在你的媒体查询中也添加这个

仅屏幕

我认为它会修复你的问题problem@xmaster我认为问题在于，当键盘打开时，屏幕尺寸会发生变化。

只有屏幕

能解释吗？@D\N我还以为它不起作用呢，你能添加一张图片吗？