IOS的一些坑

標籤：

1.解決IOS safari在input focus彈出IME時不支援position fixed的問題 $(‘input‘).focus(function(){
        var _this = this;

        //無鍵盤時輸入框到瀏覽器視窗頂部距離
        var noInputViewHeight = $(window).height() - $(_this).height();

        //網頁本文內容高度
        var contentHeight = $(document).height() - $(_this).height();

        //控制本文內容高度大於一屏，保證輸入框固定底部
        contentHeight = contentHeight > noInputViewHeight ? contentHeight : noInputViewHeight;

        //因為彈出IME需要時間，需延時處理
        setTimeout(function(){

                //彈出IME時捲軸的起始滾動距離
                var startScrollY = $(window).scrollTop();

                //彈出IME時輸入框到視窗頂部的距離，即到軟鍵盤頂部的起始距離
                var inputTopHeight = $(_this).offset().top - startScrollY;

                //彈出IME時輸入框預期位置，即緊貼軟鍵盤時的位置。因輸入框此時處於置中狀態，所以其到視窗頂部距離即為需往下移動的距離。
                var inputTopPos = $(_this).offset().top + inputTopHeight;

                //控制div不超出本文範圍
                inputTopPos = inputTopPos > contentHeight ? contentHeight : inputTopPos;

                //設定輸入框位置使其緊貼輸入框
                $(_this).css({‘position‘:‘absolute‘, ‘top‘:inputTopPos });

                //給視窗對象綁定滾動事件，保證頁面滾動時div能吸附軟鍵盤
                $(window).bind(‘scroll‘, function(){

                        //表示此時有軟鍵盤存在，輸入框浮在頁面上了
                        if (inputTopHeight != noInputViewHeight) {

                                //頁面滑動後，輸入框需跟隨移動的距離
                                var offset = $(this).scrollTop() - startScrollY;

                                //輸入框移動後位置
                                afterScrollTopPos = inputTopPos + offset;

                                //設定輸入框位置使其緊貼輸入框
                                $(_this).css({‘position‘:‘absolute‘, ‘top‘:afterScrollTopPos });
                        }
                });
        }, 100);
}).blur(function(){//輸入框失焦後還原初始狀態
        $(".div-input").removeAttr(‘style‘);
        $(window).unbind(‘scroll‘);
});  2.解決input 和 a 標籤點擊時出現透明灰色框 -webkit-tap-highlight-color:rgba(255,255,255,0);
        -webkit-appearance: none;3.解決IOS 數字帶底線<meta name="format-detection" content="telephone=no" />

IOS的一些坑