Question

我遇到了一个有趣的问题。在我的网站上，我有两个版本的手机导航栏 - 横向和纵向。要检测这两个，我使用CSS媒体方向。

@media (orientation: landscape)
 {
  /* inline menu */ 
 }

@media (orientation: portrait)
 {
  /* multiple rows menu */
 }

然而，当我打开键盘页面变成横向时，因为实际页面尺寸变小了。
有人可以帮我解决这个问题吗？我所能想到的只是输入上的焦点事件，因此无论何时它们都是聚焦的，肖像手册都会打开，但即使在风景上它也会改变菜单。这是一个说明性的图像

谢谢！

Answer 1

你会发现这个有趣的句子：

'orientation'媒体功能是'肖像'时的值 'height'媒体特征大于或等于该值 'width'媒体功能。否则'方向'就是'风景'。

因此，当键盘打开时，您的页面将变为横向模式。

有多种方法可以解决这个问题检查this回答。

Answer 2

您应该完全忽略身高/方向。像这样：

@media (max-width: 480px)
 {
  /* inline menu */ 
 }

@media (min-width: 481px)
 {
  /* multiple rows menu */
 }