如何修复iPhone（ios）环境中的页眉和页脚

Question

我需要在聚焦输入和选择字段时修复标题。我们成功修复了android和windows环境中的标题。但在iPhone中，我们面临以下问题，请参见屏幕截图2和3

我们正在使用jquerymobile 1.4.0

请任何人帮助我，我们正在尝试这个问题差不多一个月我们还没有解决这个问题。

屏幕截图-1

屏幕截图-2

屏幕截图-3

(function(){
        var targetElem = $('.fixedElement'), // or more than one
            $doc       = $(document),
            offsetY, scrollY, changeY;

        if( !targetElem.length || !navigator.userAgent.match(/iPhone|iPad|iPod/i) )
            return;

        $doc.on('focus.iOSKeyboardFix', 'input, textarea, [contenteditable]', bind);

        function bind(){
            $(window).on('scroll.iOSKeyboardFix', react);
            react();
        }

        function react(){
            offsetY = targetElem.offset().top;
            scrollY = $(window).scrollTop();
            changeY = offsetY - scrollY;

            targetElem.css({'top':'-'+ changeY +'px'});

            // Instead of the above, I personally just do:
            // targetElem.css('opacity', 0);

            $doc.on('blur.iOSKeyboardFix', 'input, textarea, [contenteditable]', unbind)
                .on('touchend.iOSKeyboardFix', unbind);
        }

        function unbind(){
            targetElem.removeAttr('style');
            document.activeElement.blur();

            $(window).off('scroll.iOSKeyboardFix');
            $doc.off('touchend.iOSKeyboardFix blur.iOSKeyboardFix');
        }
    })();

[data-role="page"] {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.ui-header {
position: fixed !important; 
top: 0px !important; 
right:0px; 
left:0px;
text-align: center;
z-index: 1000; 
width: 100%; 
height: 40px !important;
background: #aa2719 !important;
border: none !important;
padding: 0px !important; 
font-weight: normal;
opacity: 1 !important;
  }

  .ui-footer {
position: fixed !important; 
bottom: 0px !important; 
right:0px; 
left:0px;
text-align: center;
z-index: 1000; 
width: 100%; 
height: 40px !important;
background: #aa2719 !important;
border: none !important;
padding: 0px !important; 
font-weight: normal;
opacity: 1 !important;
  }




    <div data-role="page" id="page">
        <div data-role="content" style="padding: 15px">

                    <div id="header" data-role="header" data-hide-during-focus="false" data-position="fixed" data-fullscreen="true" data-tap-toggle="false" class="ui-header" style="position:fixed;-webkit-overflow-scrolling: touch;right:20px;bottom:20px;-webkit-backface-visibility: hidden;">
                        <h3>Header</h3>
                    </div>

                    <label for="text">Text Input:</label>
                        <input type="text" name="text" id="text1">
                    <label for="text">Text Input:</label>
                        <input type="text" name="text" id="text2">
                    <label for="text">Text Input:</label>
                        <input type="text" name="text" id="text3">
                    <label for="text">Text Input:</label>
                        <input type="text" name="text" id="text4">
                    <label for="text">Text Input:</label>
                        <input type="text" name="text" id="text5">
                    <label for="text">Text Input:</label>
                        <input type="text" name="text" id="text6">
                    <label for="text">Text Input:</label>
                        <input type="text" name="text" id="text7"> 

                    <select name="select" id="select1">
                        <option value="option1">Option1</option>
                        <option value="option2">Option2</option>
                        <option value="option3">Option3</option>
                        <option value="option4">Option4</option>
                        <option value="option5">Option5</option>
                        <option value="option6">Option6</option>
                        <option value="option7">Option7</option>
                        <option value="option8">Option8</option>
                        <option value="option9">Option9</option>
                        <option value="option11">Option11</option>
                        <option value="option22">Option22</option>
                        <option value="option33">Option33</option>
                        <option value="option44">Option44</option>
                    </select>

                    <textarea id="textarea1"></textarea>

                    <textarea id="textarea2"></textarea>

                    <textarea id="textarea3"></textarea>

                    <textarea id="textarea4"></textarea>

                    <a href="#" data-role="button" id="button1">Button</a>

                    <div id="footer" data-role="footer" data-position="fixed" data-hide-during-focus="false" data-fullscreen="true" data-tap-toggle="false" class="ui-footer">
                        <h3>Footer</h3>
                    </div>

        </div>

    </div>

    <script src="js/initOptions.js"></script>
    <script src="js/main.js"></script>
    <script src="js/messages.js"></script>