Question

我的页眉和页脚菜单在ios模拟器上的所有版本看起来都很棒，但是没有漂浮在ipad 2或iPhone 5的两个真实设备上。出了什么问题？我使用jQuerymobile 1.4.5和jQuery 1.9.1以及最新的cordova构建和平台全部更新。我已清理，移除平台，重新添加。浏览器也很好看。有线索吗？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' https://www.thegatewaychurch.info/; style-src 'self' 'unsafe-inline' ; media-src * https://www.thegatewaychurch.info/; img-src 'self' https://www.thegatewaychurch.info/ data:">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width height=100%" />
    <title>The Gateway Church</title>

    <link rel="stylesheet" href="css/style.css">

</head>
<body data-spy="scroll" >
    <div data-role="page" id="page">

        <div data-role="header" data-position="fixed">
            <div data-role="navbar" data-grid="d">
                <ul id="header-menu">
                    <li id="home-tab-button" class="tab-button" data-tab="#home"><span class="glyphicon glyphicon-home" aria-hidden="true"></span><br/>Home</li>
                    <li id="address-tab-button" class="tab-button" data-tab="#address"  data-tap-toggle="false"><span class="glyphicon glyphicon-book" aria-hidden="true"></span><br/>Address</li>
                    <li id="media-tab-button" class="tab-button" data-tab="#media"  data-tap-toggle="false"><span class="glyphicon glyphicon-media" aria-hidden="true"></span><br/>Media</li>
                    <li id="rota-tab-button" class="tab-button" data-tab="#rota"  data-tap-toggle="false"><span class="glyphicon glyphicon-rota" aria-hidden="true"></span><br/>Rotas</li>
                    <li id="giving-tab-button" class="tab-button"  data-tab="#giving"  data-tap-toggle="false"><span class=" glyphicon glyphicon-coins" aria-hidden="true"></span><br/>Giving </li>
                </ul>
            </div>      
        </div>
        <div data-role="main" id="main" class="ui-content" >

            <div id="rendered" >
                <div id="content"><p class="center"><img src="img/thegateway-logo.png" class="responsive"/></p><h3>Join the adventure...</h3><p>The Gateway Church is a multi-cultural charismatic Church in King's Lynn, Norfolk. You'll be sure of a very warm welcome any Sunday 10am at King's Lynn Academy on Queen Mary Road.</p></div>
            </div>
        </div>  
        <div id="footer" data-role="footer" data-position="fixed" >
            <div data-role="navbar" data-grid="d">
                <ul id="footer-menu">

                    <li id="calendar-tab-button" class="tab-button" data-tab="#calendar"  data-tap-toggle="false"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span><br/>Calendar</li>
                                            <li id="news-tab-button" class="tab-button" data-tab="#news"  data-tap-toggle="false"><span class="glyphicon glyphicon-newspaper" aria-hidden="true"></span><br/>News</li>
                    <li id="group-tab-button" class="tab-button" data-tab="#smallgroup"  data-tap-toggle="false"><span class="glyphicon glyphicon-group" aria-hidden="true"></span><br/>Groups</li>
                    <li id="prayer-tab-button" class="tab-button" data-tab="#prayer"  data-tap-toggle="false"><span id="pray"  aria-hidden="true"></span><br/>Prayer</li>
                </ul>
            </div><!-- /navbar -->

        </div>
    </div>    

    <script type="text/javascript" src="cordova.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/jqueryMobile.js"></script>
    <script src="js/jQueryMD5.js"></script>
    <script src="js/controller.js"></script>
    <script src="js/index.js"></script>

</body>
</html>

Cordova JQueryMobile菜单没有漂浮在ios设备上

0 个答案: