在phonegap应用上滚动iframe

时间:2015-12-21 17:15:02

标签: javascript html css phonegap-build

我正在尝试在我的phonegap应用中启用垂直和可能水平滚动,其中我在特定页面上有iframe。以下是它的渲染方式...... iphone 5 rendering

以下是我对该页面的代码......

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link type="text/css" rel="stylesheet" href="css/purchase.css" />
<!-- START STYLE SHEET FOR MENU --> 
<link type="text/css" rel="stylesheet" href="css/menu.css" />
<link type="text/css" rel="stylesheet" href="dist/css/jquery.mmenu.all.css" />
 <!-- END STYLE SHEET FOR MENU -->

 <!-- REQUIRED DEPENDCY - SHOULD ALREADY BE IN CODE -->
 <script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript">    </script>  

 <!-- START CODE FOR MENU -->
<script type="text/javascript" src="dist/js/jquery.mmenu.min.all.js">  </script>  
<!-- END CODE FOR MENU -->

<!-- MUST DISABLE -->
<!--  <script src="jquery-1.11.3.js" type="text/javascript"></script> -->

<!-- CODE FOR MENU AT END OF HEAD -->
    <script>
    $(function() {
            $('nav#menu').mmenu();
        });
    </script>
    <!-- END CODE FOR MENU AT END OF HEAD-->
</head>

<!-- START OF MENU INSDIE BODY  All this code will be on every .html page creating the menu for the app -->
<div id="page">  
        <div class="header">
            <a href="#menu"></a>
            Purchase
        </div>
        <nav id="menu">
            <ul>
                Bunch of code not pertaining to issue...
</div>
<!-- END OF MENU INSIDE BODY -->
<iframe src="http://www.enasco.com/WatertankMathProducts.html" style="width:100%; height:100%;">
</html>

还有一些CSS ...

body {
height: 100%;
position: fixed;
overflow-y: scroll;
margin: 0px;
padding: 0px;
width: 100%;
font-family: 'Roboto', sans-serif;
}

h1 {
font-weight: 300;   
}

.text {
width: 30px;    
margin-left: 20px;
margin-right: 20px;
border: none;
font-size: 30px;
}

有没有人看到为什么我无法启用滚动的问题?我希望网站能够垂直滚动以查看所有内容,如果需要,可以水平滚动。

0 个答案:

没有答案