JQM页面内容大小问题

Question

所以当谈到Jquery Mobile开发时我是一个真正的新手，我想知道是否有人可以帮助我理解JQM库的一个小方面。

我的问题与页面内容和iOS键盘有关。我有几个页面大小不一的内容。例如，在一个页面上我有五个输入字段，下一页我只有四个。当我使用iOS“下一步”按钮在不同的字段之间导航而我最后到达最后一个字段时，页脚会自动出现在键盘上方，理想情况下我需要它。

但是，在只有四个输入字段的下一页上，当我使用“下一步”按钮在字段之间导航并最终在最后一个字段上时，页脚不会直接出现在键盘上方和顶部其中，一旦键盘消失，最后一个输入字段和页脚之间就会产生一个空白区域。

为什么会这样？我猜它与页面内容有关，但我不确定。我附上了一张图片，向您展示键盘取消激活时会发生什么。

<div data-role="page" data-theme="f" id="some id">
        <div data-role="header">
            <a href="#some href" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"></a>
            <h1>Text</h1>
            <a href="#some href" data-icon="arrow-r" data-iconpos="notext"></a>
        </div>
<div data-role="content">
        <label for="some label">Text</label>
        <select name="some name" id="some id">
            <option value="Default">Select </option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
        <label for="some label">Text:</label>
        <select name="some name" id="some id">
            <option value="Default">Select  Status</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
        </select>
        <label for="some label">Text (YYYY-MM-DD):</label>
        <input type="date" name="some name" id="some id" value="" class="required"/>
        <label for="some label">Text (YYYY-MM-DD):</label>
        <input type="date" name="some name" id="some id value="" class="required"/>

    </div>
    <div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height: 42px;">
        <a href="#some href" data-icon="arrow-l" data-direction="reverse" data-iconpos="left" style="margin-left: 10px; margin-top: 5px">Done</a>
        <a href="#main_menu" data-icon="home" data-direction="reverse" data-iconpos="notext" style="float: right; margin-right: 10px; margin-top: 5px"></a>
    </div>
</div>

Answer 1

这与iOS6, UIWebView and position:fixed密切相关 - 与您实际想要的页脚移动不完全相同，但可能与高度更新的时间有关。

您可以通过覆盖jquery mobile从javascript中进行的位置更改来修复此问题。那个脚本就在那里，因为jquery mobile也支持那些本身不能处理固定定位的旧浏览器。如果您只需要支持最新版本的iOS，则可以使用纯CSS获得更好的结果。