移动键盘遮盖界面，且不允许用户滚动

支持
4

这对我有用（在我的主题中）：

custom.scss：

.mobile-view .modal {
  top: 0;
  height: 100vh;
  align-items: flex-start;
}
.mobile-view .modal .d-modal__container {
  height: 100vh;
}

.mobile-view #reply-control.open {
  top: 0;
  height: 100vh;
}

common/head_tag.html：

  const is_mobile = !!document.querySelector('.mobile-view')
  if (window.visualViewport && is_mobile) {
    window.visualViewport.addEventListener('resize', () => {
      const modal = document.querySelector('.mobile-view .modal .d-modal__container');
      if (modal) {
        modal.style.maxHeight = `${window.visualViewport.height}px`;
      }
      const dialog = document.querySelector('.mobile-view #reply-control.open');
      if (dialog) {
        dialog.style.maxHeight = `${window.visualViewport.height}px`;
      }
    });
  }

这些更改带来了更好的用户体验：

  • 有限的屏幕空间用于当前任务（输入字段），而不是在模态框和背景之间分割
  • 字段不会被键盘隐藏，用户也无法滚动
  • 用户不必关闭、打开、关闭、再打开键盘来填写所有字段
  • 用户不必盲目地输入一个他们看不见的字段

不同浏览器之间仍然存在一些不一致。JS 调整大小似乎在 Chromium 中不起作用，但在 Brave 和 Firefox 中却可以。但 Chromium 的体验仍然更好，因为模态框位于屏幕顶部，而键盘不在那里。

纯 CSS 方法不起作用的原因：

  • 我认为 env(keyboard-inset-height) 在 iOS 上的 PWA 之外不起作用
  • 100dvh 理论上可行，但似乎尚未在我的移动浏览器中得到支持

我还听说有人找不到注册按钮。所以：

始终显示注册按钮，不要在移动设备上隐藏它：

.panel .header-buttons .sign-up-button {
  display: inline-flex;
}

所有这些问题都阻止了人们注册论坛和发表他们的第一篇帖子。所以，虽然这听起来很简单，但对我来说，这些都是极其优先的修复。

1 个赞