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

在对input和select字段进行聚焦时，我需要修正标题。 我们在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>