美文网首页
ios UC 浏览器表单获得焦点,头部和底部fixed定位错位

ios UC 浏览器表单获得焦点,头部和底部fixed定位错位

作者: kyle背背要转运 | 来源:发表于2017-06-26 15:20 被阅读0次

    描述:ios UC 浏览器表单获得焦点,头部和底部fixed定位错位问题
    解释:fixed定位错位是因为表单获得焦点,可视高度变小
    解决问题的思路是当表单获得焦点的时候把头部和底部fixed定位改成absolute;

    (function(){
        'use strict';
        function init() {
    
            // 苹果uc浏览器 position: fixed;处理
            var ua = navigator.userAgent.toLowerCase();
            if (/iphone|ipad|ipod/.test(ua)) {
    
                if (ua.indexOf('ucbrowser') > -1 || ua.indexOf('micromessenger') > -1) {
    
                    $('input,textarea,select').bind('focus', function () {
                        $('header').css({
                            'position': 'absolute'
                        });
                        $('.fixed-footer').css({
                            'position': 'absolute'
                        });
    
                        $('html').css({
                            'position': 'relative'
                        });
                    });
                    
                    $('input,textarea,select').bind('blur', function () {
                        $('header').css({
                            'position': 'fixed'
                        });
                        $('.fixed-footer').css({//由于有些设备直接fixed定位会从键盘的位置掉到底部的动作,所以先隐藏再显示;
                            'position': 'fixed',
                            'bottom':'0',
                            'display':'none'
                        });
    
                        setTimeout(function(){
                            $('.fixed-footer').fadeIn();
                        },500);
                        $('html').css({
                            'position': 'static'
                        });
    
                    });
    
                }
            }
        }
    
        init();
    })();
    
    

    相关文章

      网友评论

          本文标题: ios UC 浏览器表单获得焦点,头部和底部fixed定位错位

          本文链接:https://www.haomeiwen.com/subject/kzhjcxtx.html