jQM初始加载时无法获得高度和宽度

Question

jQM width（）和height（）返回0，带有DIV ID。

我的CSS使DIV BG变红只是为了确保div具有100％的宽度和高度。它确实在全屏显示红色。

我尝试在“pagebeforeshow”页面事件中获取高度和宽度，但返回0。

如果我导航到另一个页面并返回“userMainPage”，则高度和宽度将显示正确的数字。只需初始加载，它将返回0。

请指出我的错误，为什么初始加载给我0宽度和高度。谢谢。

我的HTML：

<div data-role="page" id="userMainPage">
    <div data-role="header" data-add-back-btn="false" data-position="fixed" data-id="main-header" data-theme="a">
        <a href="#leftPanel" class="ui-btn-icon-notext ui-icon-bars ui-btn ui-btn-inline ui-corner-all">Left Panel</a>
        <h1>Welcome</h1>
        <a href="#rightPanel" class="ui-btn-icon-notext ui-icon-grid ui-btn ui-btn-inline ui-corner-all">Right Panel</a>
        <div data-role="navbar">
            <ul>
                <li>
                    <a href="#userMainPage" class="ui-btn-active ui-state-persist" data-transition="none">Promotions</a>
                </li>
                <li>
                    <a href="#restaurantList" data-transition="none">Restaurants</a>
                </li>
            </ul>
        </div>
    </div>
    <div id='userMPContent' data-role="content" class="top77">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div id="swiper1">
                        Slide 1 Here
                    </div>
                </div>
                <div class="swiper-slide">
                    <div id="swiper2">
                        Slide 2 Here
                    </div>
                </div>
                <div class="swiper-slide">
                    <div id="swiper3">
                        Slide 3 Here
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我的JS：

$(document).on('pagebeforeshow', '#userMainPage', function () {
    var height = $('#userMPContent').height();
    var width = $('#userMPContent').width();
    $('.swiper-container').css('width', width);
    $('.swiper-container').css('height', height);
    $('.swiper-slide').css('width', width);
    $('.swiper-slide').css('height', height);
    console.log('Height: ' + height);
    console.log('Width: ' + width);
    var mySwiper = $('.swiper-container').swiper({
        //Your options here:
        mode: 'horizontal',
        autoResize: true,
        loop: false
        //etc..
    }); 
});

和我的CSS：

#userMPContent {
    background-color: red;
}