iOS正常运行的前端代码在Android需二次点击，请求排查原因及解决方案

DevOps 小满

2026-7-14

iOS正常、Android需点击两次的交互问题分析与解决

问题原因

Android移动端浏览器对hover事件的处理逻辑和PC/iOS不同：触摸设备没有鼠标悬停状态，第一次点击会触发hover事件，第二次点击才会触发元素的点击事件。你的代码给.imageOne绑定的hover两个回调都是隐藏该元素，导致Android上第一次点击触发hover隐藏元素，第二次点击才能触发后续的myFunction（假设该函数绑定在点击事件上）。
和viewport标签无关，你当前的viewport配置是标准的移动端适配设置，无需修改。

解决方法

方案1：替换hover为click事件（推荐）

移除hover绑定，改用点击事件处理交互，适配所有设备：

$(document).ready(function(){
    $(".imageOne").click(function(){
        $(this).css("display", "none");
    });
});

方案2：区分设备绑定事件

如果需要保留PC端的hover逻辑，移动端改用触摸事件：

$(document).ready(function(){
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    if(isMobile){
        $(".imageOne").on("touchstart", function(){
            $(this).css("display", "none");
        });
    } else {
        $(".imageOne").hover(function(){
            $(this).css("display", "none");
        }, function(){
            $(this).css("display", "none");
        });
    }
});