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

支持
1

这仍然很糟糕，并且影响了我的用户在注册、登录以及创建/编辑帖子时的体验。我在手机和平板电脑上都观察到了这种情况。我认为至少有一台平板电脑是 iOS 设备，但我主要是在 Android 上观察到这种情况。

我的论坛是本地的，所以我经常有机会亲自观察人们与它的互动。

我现在可以接受 CSS 修复，并且最好能将修复集成到核心代码中。如果我找到解决方案，我会在此更新。

3 个赞
3

你试过 Don 的 CSS 修复方法吗？

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 个赞
5

我将不得不尝试两组代码进行测试。因为我在编辑表单模板或使用 CSS/HTML 的主题编辑器时遇到此问题。我通过添加大量空行解决了这些问题。这些 CSS 修复看起来好多了。

6

我认为团队已经在处理了

2 个赞
7

很好，它引起关注了… 但正如我之前提到的，dvh在我的测试中不起作用。

1 个赞
8

嘿 @bitmage，你能否发布一些你在 Android 上遇到问题的截图？或者甚至是视频。我想确认我们是在谈论同一件事。谢谢！