移动设备浏览器上的输入元素点击行为与 Chrome 设备呈现不同答案

【问题标题】：Input element click on mobile device browser behaves differently than in Chrome device rendering移动设备浏览器上的输入元素点击行为与 Chrome 设备呈现不同
【发布时间】：2021-03-04 15:27:33
【问题描述】：

我遇到了一个难以调试的问题，在我的 Samsung S10 上单击输入元素的行为与在桌面 Chrome 浏览器中的行为完全不同（使用设备测试工具时也是如此）。

测试方法如下：

在小型移动设计（最大宽度：56em）上，屏幕底部会出现一个蓝色过滤条
点击它以显示所有过滤器，出现一个弹出菜单（您可以通过点击“Bekijk resultaten”按钮返回结果）
点击屏幕底部的“+Specificeer”
在出现的小范围规范弹出窗口中，单击第一个输入元素 (placeholder="van")

在桌面版 Chrome 中，用户现在可以输入数字。此外，当我使用 Chrome 设备调试工具并将其设置为 iPhoneX、Galaxy S5、Galaxy Fold 渲染等时，它工作得很好。

但是当我在 Chrome 浏览器中加载我的 Galaxy S10 上的实时站点时，用户单击输入元素输入数字的那一刻，过滤器弹出菜单的其余部分被隐藏，它只显示部分范围规范弹出。页面的滚动被完全禁用。我认为某些事件的处理方式不同，但我不知道哪些事件以及原因。

我尝试使用monitorEvents(window,"click"); 监控事件，但没有显示点击事件
通过性能选项卡记录事件，但找不到罪魁祸首

我不知道为什么了，我无法在 Chrome 桌面浏览器中重现它来实际调试它。

更新 1

问题是触发resize 方法的移动虚拟键盘。通过检查宽度变化来修复它：

var initialWidth = $(window).width(), initialHeight = $(window).height();

window.addEventListener('resize', function () {

    if ($(window).width() != initialWidth) {//the width was changed
    
    }

})

【问题讨论】：

您是否尝试过监控touchstart 事件，看看是否更适合您的用例？
我的 2 美分就是这个。几个月前我们遇到了类似的问题。我不明白为什么它在手机和 chrome 设备上的表现不同。据我记得，我认为 chrome display 只处理设备的尺寸。它不会更改用户代理。这是第一点。因此，如果您想在移动设备上进行测试，请尝试使用可以帮助您更改用户代理的插件，以便您可以在计算机上在 chrome 上进行测试。其次是该事件将是一个touchstart 供您监控。当您的用户代理更改为您不再点击的实际电话时。
我发现，当输入处于焦点并且键盘弹出时，即时.mobile 类从section.filters 中删除。您必须查看在任何事件上删除 .mobile 类的任何事件处理程序。其次，在遇到错误后，我再次将删除的 .mobile 类手动添加到 section.filters 并且模态恢复正常工作。单击Specificeer 后会出现另一个错误，即主页变得无法滚动。同样在同一时刻还有另一个错误TypeError 这可能是另一个错误的原因......
@illusion 这正是它，它应该是答案
我会添加它作为答案... XD

标签： javascript android html css samsung-galaxy

【解决方案1】：

嗯，我玩过。错觉是完全正确的。

我已经将一些样式从 .filters .mobile 类复制到 .filters_TEST

.filters_TEST{
  &.active{
    height: auto;
    flex-grow:1;
    overflow: auto;
    opacity: 1;
    z-index: 100;
    padding: 0;
    background-color: #FFF!important;
    min-height: 100vh;

    .modal_container{
      background-color: #fff;
      overflow: auto;
      overflow-x: hidden;
      position: relative;
      width: 100%;
         height: 100vh;
      overflow-y: hidden;

      #mobilefilters{
        display:block;
      }
    }
  }

}

添加了测试按钮：

<span class="js-callmodal display-mobile-only">CALL MODAL</span>

然后在按钮上单击将新类添加到。

$('.js-callmodal').on('click',function(){
  $('.filters_TEST').addClass('active');
});

现在当您单击时： CALL MODAL -> Specificeer -> 输入模态保持原位；

要真正解决您的问题，您应该搜索触发输入时删除 .mobile 类的内容。我猜代码应该在文件中的某个地方：_genfuncs.min.js?v=90

【讨论】：

【解决方案2】：

在调试时，我发现当输入处于焦点并弹出键盘时，即时.mobile 类从section.filters 中删除。您必须查看在任何事件上删除 .mobile 类的任何事件处理程序。其次，在遇到错误后，我再次将删除的 .mobile 类手动添加到 section.filters 并且模态恢复正常工作。单击“Specificeer”后，它会产生另一个错误，主页变得不可滚动。同样在同一时刻还有另一个错误 TypeError 可能是另一个错误的原因......

【讨论】：