固定持久标题和滚动到聚焦输入字段 [英] Fixed persistent header and scroll to focussed input fields
问题描述
问题：基于iOS7 Safari中的主屏幕Web应用程序的给定示例，如何实现永远不会滚动到视图外的固定持久标题，以及在点击时滚动到视图的输入字段？
这两个例子有一个区别，在视口中有 height = device-height 不会。
没有设备高度
< meta id =viewportname =viewportcontent =user-scalable = no，initial-scale = 1，minimum-scale = 1/>
演示：
编辑链接：，如何获得固定的标题留在页面顶部？，
修正移动safari网站上带有文本字段的标题，
iOS 5固定位置和虚拟键盘，
ipad / iphone上的固定标题，页脚和边栏问题，
CSS位置：固定;在iPad / iPhone上？，
在Mobile Safari中固定位置，
在移动Safari中打开虚拟键盘时，如何停止我的固定导航移动？，
网络应用 - 设备高度/键盘问题，
当ios 7虚拟键盘存在时，div元素不会停留在底部，
iOS网络应用：在输入文字字段中停用自动对焦， ios7移动safari中消失的位置固定标题，
http://remysharp.com / 2012/05/24 / issues-with-position-fixed-scrolling-on-ios / ，
https://github.com/jquery/jquery-mobile/issues/5532 ，
http://dansajin.com/2012/12/07/fix-position-fixed/
相关链接到输入字段不重点问题： webkit-overflow在iOS 7全屏网络应用程序中折叠表单，
iOS 7移动Safari滚动事件的问题键盘向上和向下，
使用键盘html时，webview焦点的ios7问题，
如何在iPhone上集中HTML文本字段（导致键盘弹出）？，
移动Safari自动对焦文本字段，
iPad浏览器在追加输入后需要额外点按，
在iPhone上点击文本输入字段打开键盘，但输入内容不会放在任何文字中，
`-webkit-overflow-scrolling：touch` break for iOS7中最初的屏幕外元素，
http： //www.quirksmode.org/blog/archives/2010/09/click_event_del.html ，
http://calendee.com/ios-7-kills-forms-in-html5-apps/
您应该查看这个答案 - 这里是一个非常好的文章布拉德弗罗斯特，我已经拼命地阅读了几次自己多年来希望回答这个困境。 - 它能够完全回答你的问题。 你可以修复一个问题，你的头部毛刺在演示2只是固定的标题隐藏在绝对定位的#page后面。给你的标题一个1+的z-索引，这将解决这个问题。 到键盘输入时，我甚至不确定这实际上是一个错误，只是浏览器的性质。发生的事情是，键盘正在获得焦点，在那一刻，你现在处理的是ios的UI，而不是Web浏览器和后台中的一切都冻结（包括固定的元素和所有其他元素）。请注意整个屏幕如何滚动，这不是一个内置浏览器功能的网络功能。 QUESTION: Based on the given examples for homescreen web apps in iOS7 Safari, how can I achieve both a fixed persistent header that never scrolls out of view, and form input fields that scroll into view when tapped? The two examples have one difference, one has
http://bradfrostweb.com/blog/mobile/fixed-position/
height=device-height in the viewport, the other doesn't.
Without device-height
<meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1" />
Demo: http://run.plnkr.co/plunks/SU8Csk/
Edit Link: http://plnkr.co/edit/SU8Csk
The good: The fixed header does not change position/height when tapping the fields.
The bad: The user cannot see the focussed field without manually scrolling, or pressing the 'next' button. This can be very tedious, especially if the fields are on a page that doesn't overflow.
With device-height
<meta id="viewport" name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1" />
Demo: http://run.plnkr.co/plunks/rPoyaB/
Edit Link: http://plnkr.co/edit/rPoyaB
The good: The user is scrolled to the focussed field as desired.
The bad: The fixed header scrolls completely out of view, this needs to be persisted on screen at all times. The scenario is, it will contain a cancel button and a save button that should always be accessible. Also when the field is blurred, the header itself looks squashed until the user scrolls it down into view, but if overflow is disabled then they can't even do this.
The ugly: On my non-trivial, real code, away from these simplified examples, there are a bunch of elements that are positioned absolutely within the header to create a curved line 'tab' effect, the alignment of these goes completely off.
You should be able to open each demo URL in iOS7 Safari, add to Home Screen, and launch to demonstrate the issue.
What is the best way of resolving this?
NOTE: I am aware that there are 'bugs' in iOS7 Safari, particularly when it comes to homescreen web apps, however I believe that a workaround may exist related to how I am structuring the page. I have done a large amount of research (see below) but I am struggling to find a solution.
Related links to 'fixed header' issue: Need Fixed Header in ios7+, How does one get a fixed header to stay at the top of the page?, Fixed headers with text fields on mobile safari websites, iOS 5 fixed positioning and virtual keyboard, Issues with fixed header, footer and side bar on ipad / iphone, CSS "position: fixed;" on iPad/iPhone?, Fixed positioning in Mobile Safari, How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?, web app - device-height / keyboard issue, Div element won't stay at the bottom when ios 7 virtual keyboard is present, iOS web app: disable autofocus on input text field, disappearing position fixed header in ios7 mobile safari, http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/, https://github.com/jquery/jquery-mobile/issues/5532, http://dansajin.com/2012/12/07/fix-position-fixed/
Related links to 'input fields do not focus' issue: webkit-overflow-scrolling forms broken on iOS 7 full-screen web app, Issue with iOS 7 Mobile Safari Scroll Events on Keyboard Up and Down, ios7 issues with webview focus when using keyboard html, How do I focus an HTML text field on an iPhone (causing the keyboard to come up)?, Mobile Safari Autofocus text field, iPad browser requires extra tap after appending input, Tapping text input field on iPhone brings up keyboard, but typing will not put in any text, `-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7, http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html, http://calendee.com/ios-7-kills-forms-in-html5-apps/
You should check out this answer - fixed position div freezes on page (iPad)
And here is a really good article by Brad Frost that I've desperately read through a few times myself over the years hoping for an answer to this dilemma. - http://bradfrostweb.com/blog/mobile/fixed-position/
It answers what you're asking pretty thoroughly. Fixed positioning is broken on mobile, it can be massaged with JS, but not really even completely fixed.
You can fix one problem, your "header glitch" in demo 2 is just the fixed header hiding behind the absolutely positioned #page. Give your header a z-index of 1+ and that will fix that issue.
As far as the header losing positioning when the keyboard comes in; I'm not even sure that's actually a bug, just the nature of the browser. What's happening is that the keyboard is gaining focus, at that point you're now dealing with ios' UI not the web browser and everything in the background is freezing (including fixed positioned elements and all other elements). Notice how the entire screens scrolls, that's not a web feature it's a built in browser feature.
这篇关于固定持久标题和滚动到聚焦输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
