通过 <a> 导航到页面后如何调整页面大小？（JQuery 手机）

Question

我通过 resize() 函数使页面适合设备屏幕：

function resize()
{
    var content_h = $.mobile.getScreenHeight()-$(".jq_header").outerHeight(true)-$(".jq_footer").outerHeight(true)-
        ($(".jq_content").outerHeight(true)-$(".jq_content").height());
    $(".jq_content").height(content_h);
}

页面更改者：

<a href="#contacts" class="ui-btn ui-icon-mail ui-btn-icon-left" id="link_to_contacts">Contacts</a>

单击此 link 并加载 "contacts" 页面后如何调用调整大小？

$(document).ready(function()
{
    $("#link_to_contacts").on("click",function() 
    {
        resize();
    });
});

好像不行。

Here 是一个应用示例。

完整来源：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <script>

            function resize()
            {
                var content_h = $.mobile.getScreenHeight()-$(".jq_header").outerHeight(true)-$(".jq_footer").outerHeight(true)-
                    ($(".jq_content").outerHeight(true)-$(".jq_content").height());
                $(".jq_content").height(content_h);
            }
            $(document).on( "pagecontainershow", function()
            {
                resize();        
            });

            $(window).on("resize orientationchange", function()
            {
                resize();
            });
            $(document).ready(function()
            {
                $("#link_to_contacts").on("click",function() 
                {
                    resize();
                });
            });
        </script>
    </head>
    <body>
        <div data-role="page" data-theme="a" id="photos" class="ui-page">
            <div data-role="header" data-theme="a" class="jq_header">
                <h1>Header</h1>
                <div data-role="navbar">
                    <ul>
                        <li><a href="#" class="ui-btn-active ui-state-persist ui-icon-camera ui-btn-icon-left">Photos</a></li>
                        <li><a href="#contacts" class="ui-btn ui-icon-mail ui-btn-icon-left" id="link_to_contacts">Contacts</a></li>
                    </ul>
                </div>
            </div>
            <div data-role="content" data-theme="a" class="jq_content">
                <div data-role="collapsible" data-content-theme="b" style="text-align : center;">
                    <h3>Happy me</h3>
                    <img src="http://www.happyologist.co.uk/wp-content/uploads/happy.jpeg" style="width:194px;height:182px;"/>
                </div>
                <div data-role="collapsible" data-content-theme="b" style="text-align : center;">
                    <h3>Sad me</h3>
                    <img src="http://mazakmasti.in/wp-content/uploads/2015/01/Sad-smiley-with-tears.png" style="width:194px;height:182px;"/>
                </div>
            </div>

            <div data-role="footer"  data-theme="a" class="jq_footer">
                <h1>Footer</h1>
            </div>
        </div>
        <div data-role="page" data-theme="a" id="contacts"  class="ui-page">
            <div data-role="header" data-theme="a" class="jq_header">
                <h1>Header</h1>
                <div data-role="navbar">
                    <ul>
                        <li><a href="#photos" class="ui-btn ui-icon-camera ui-btn-icon-left">Photos</a></li>
                        <li><a href="#" class="ui-btn-active ui-state-persist ui-icon-mail ui-btn-icon-left">Contacts</a></li>
                    </ul>
                </div>
            </div>
            <div data-role="content" data-theme="a" class="jq_content">
                    <div>E-mail: example@example.com</div><br/>
                    <div>Address: Green st. 28</div>
            </div>

            <div data-role="footer"  data-theme="a" class="jq_footer">
                <h1>Footer</h1>
            </div>
        </div>
    </body>
</html>

Answer 1

你为什么使用 JS？它使用起来更容易和可靠 CSS 并为您的页面制作一个良好的响应式结构。

考虑一下：

删除所有以前的 jQuery 调整大小方法...
对于每个 .ui-page 用 DIV 包装内部内容，其中包含 class table
将 CSS 规则添加到：.jq_header、.jq_content、.jq_footer 以充当 table 行。
添加一些基本的宽度和高度规则（基本上推到 100% 大小）。
处理溢出，大功告成。

Fiddle 演示： With your code after applying changes

CSS 添加：

body, html{ 
    height:100%; 
    width:100%;
    overflow:hidden;
}
.ui-page {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    overflow:hidden;
}
.table {
    display:table;
    height: 100% !important;
    width: 100%;
}
.jq_header,
.jq_content,
.jq_footer {
    display:table-row;
    width: 100%;
}
.jq_content {
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
}

通过 <a> 导航到页面后如何调整页面大小？（JQuery 手机）

How to resize page after navigating to it via <a>? (JQuery Mobile)

jquery

jquery-mobile

通过 <a> 导航到页面后如何调整页面大小？ （JQuery 手机）

How to resize page after navigating to it via <a>? (JQuery Mobile)

jquery

jquery-mobile

通过 <a> 导航到页面后如何调整页面大小？（JQuery 手机）