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

2017-06-26  本文已影响0人  kyle背背要转运

描述: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();
})();

上一篇下一篇

猜你喜欢

热点阅读