输入元素在移动设备浏览器上的点击行为与在 Chrome 设备渲染中的行为不同

Question

我有一个难以调试的问题，在我的三星 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
    
    }

})

Answer 1

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

我已经将一些样式从 .filters .mobile class 复制到 .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>

并在按钮上单击添加了新的 class 到 .

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

现在当你点击： CALL MODAL -> 指定者 -> 输入模态保持不变；

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

Answer 2

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

输入元素在移动设备浏览器上的点击行为与在 Chrome 设备渲染中的行为不同

Input element click on mobile device browser behaves differently than in Chrome device rendering

html

javascript

css

android

samsung-galaxy