我正在尝试在我的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;
}
有没有人看到为什么我无法启用滚动的问题?我希望网站能够垂直滚动以查看所有内容,如果需要,可以水平滚动。