jquery - 我创建了一个响应良好的设计，效果很好，但搜索字段隐藏在焦点上

我创建了一个自适应设计，到现在为止还可以正常工作，但是问题是当用户想在搜索字段上键入时，当键盘出现在智能手机上时，它的隐藏内容
。
浏览器是否放大显示在模式键盘上？还是我应该知道的其他内容？
因为我使用的是用户放大或缩小页面时触发的功能。
我正在使用的功能是

function resize(){
    optimaizeHeader();
    (function($){
        var zoomNew = window.innerWidth;
        if(zoomNew>769 ) {
            $('#head-form').show();
            $('.right-sidebar').css("display","block");
            $('.right-sidebar').css("width","24%");
            $('.blocks-content').show();
            $('.menu').show();
            $('.blocks-content').css("width","75%");
            $('.main-content').css({"padding-left":"11%","padding-right":"11%"});
        }
        if(zoomNew<769 ) {
            $('#head-form').hide();
            $('.right-sidebar').css("display","none");
            $('.blocks-content').css("width","100%");
            $('.main-content').css({"padding-left":"3%","padding-right":"3%"});
        if(zoomNew<480){
            $(".menu").hide();
        }

    }

$('.width').text(zoomNew+" px");
    })(jQuery);
}

HTML

<form id="head-form" action="<?php bloginfo('url');?>">
<input type="text" name="s" placeholder="type to search"/>
<button class="search-btn"><i class=" glyphicon glyphicon-search"></i></button>
</form>

表单在某些模式下隐藏

最佳答案

只需将焦点放在搜索字段上即可触发缩放，该解决方案是比较最后的分辨率和当前分辨率，如果拖曳缩放相同，则不应用功能调整大小，只需在if语句中添加&& zoomNew！= befor即可，例如这个 ：

    function resize(){
optimaizeHeader();
(function($){
var zoomNew = window.innerWidth;
if(zoomNew>769 && zoomNew!=befor ) {
befor=zoomNew;
$('#head-form').show();
$('.right-sidebar').css("display","block");
$('.right-sidebar').css("width","24%");
$('.blocks-content').show();
$('.menu').show();
$('.blocks-content').css("width","75%");
$('.main-content').css({"padding-left":"11%","padding-right":"11%"});
}
if(zoomNew<768 && zoomNew!=befor) {
befor=zoomNew;
$('#head-form').hide();
$('.right-sidebar').css("display","none");
$('.blocks-content').css("width","100%");
$('.main-content').css({"padding-left":"3%","padding-right":"3%"});
if(zoomNew<480 && zoomNew!=befor){
befor=zoomNew;
$(".menu").hide();
}

}
})(jQuery);
}

演示在链接上
http://www.demos.amp47ds.com/

关于jquery - 我创建了一个响应良好的设计，效果很好，但搜索字段隐藏在焦点上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27991236/