인터넷 익스플로러로 실행시에는 iframe의 높이가 지정이 되고 iframe의 내용보다 크기를 작게 설정하면 스크롤이 생성되는데요...
안드로이드에서 구동하면 높이는 무조건 iframe의 내용에 맞춰지더라구요..
안드로이드에서 iframe의 높이를 더 줄일 수 없나요??? 아래 소스에도 iframe의 크기를 100px로 맞췄지만, 안드로이드로 구동하면 리스트의 크기에 맞춰지는군요...
index 소스 :
<!DOCTYPE HTML>
<html>
<head>
<title>jQuery</title>
<link href="jquery.mobile-1.1.1.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="cordova-1.9.0.js"></script>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<!-- First Page Start -->
<div data-role="page" id="main">
<!-- Page Header Start -->
<div data-role="header" data-position="inline">
<a href="05.form.html" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="05.form.html" data-icon="check">Save</a>
</div>
<!-- Page Header End -->

<!-- Page Body Start -->
<div data-role="content">
<div id="bookmarks">
<iframe id="bookmarks_iframe" src="bookmarks.html" frameborder="1" border="10px" bordercolor="RED" scrolling="yes" style="height:100px;"></iframe>
</div>
</div>
<!-- Page Body End -->

<!-- Page Footer Start -->
<div data-role="footer" class="ui-bar" data-position="fixed">
<a href="05.form.html" data-role="button" data-icon="delete">Remove</a>
<a href="05.form.html" data-role="button" data-icon="plus">Add</a>
<a href="05.form.html" data-role="button" data-icon="arrow-u">Up</a>
<a href="05.form.html" data-role="button" data-icon="arrow-d">Down</a>
</div>
<!-- Page Footer End -->
</div>
<!-- First Page End -->
</body>
</html>
iframe의 소스 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>bookmarks</title>

<script type="text/javascript"></script>

<!-- JQuery -->
<link href="jquery.mobile-1.1.1.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="cordova-1.9.0.js"></script>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="header" data-position="fixed">
<h1>Bookmarks</h1>
<a href="javascript:loadContents('blank.html')" class="ui-btn-right">Close</a>
</div>
<div data-role="content" id="contents_html" data-theme="c">
<ul data-role="listview" data-theme="c">
<li><a href="javascript:loadContents('example1/example1.html')">Hello world!</a></li>
<li><a href="javascript:loadContents('example2/example2.html')">Collision Detection</a></li>
<li><a href="javascript:loadContents('example3/example3.html')">Multi Target Tracking</a></li>
<li><a href="javascript:loadContents('example4/example4.html')">Unique object</a></li>
<li><a href="javascript:loadContents('example5/example5.html')">Inline Dolphin</a></li>
<li><a href="javascript:loadContents('example6/example6.html')">AR Manual</a></li>
<li><a href="javascript:loadContents('example7/example7.html')">Follow Me</a></li>
<li><a href="javascript:loadContents('example8/example8.html')">Lab Tour</a></li>
<li><a href="javascript:loadContents('example9/example9.html')">Visual Search</a></li>
</ul>
</div>
</body>
</html>
이 게시물을