网站用键盘变成横向

Question

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

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

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

但是，当我打开我的键盘页面时，由于实际页面尺寸变小了，所以我的键盘页面变成了横向。
有人可以帮我解决这个问题吗？我能想到的就是输入上的 focus 事件，因此只要他们聚焦，纵向菜单就会打开，但即使在横向上也会更改菜单。这是一张说明性图片

谢谢！

Answer 1

如果勾选Media Queries W3C Recommendation

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

The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.

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

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

Answer 2

你应该完全忽略 height/orientation。像这样：

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

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

网站用键盘变成横向

Website turns to landscape with keyboard

javascript

css

keyboard

mobile

landscape-portrait