Iframe won't scroll! It works fine in FireFox, Chrome, and IE
I wrote a simple holder to display websites writen for phones on larger screens. In it I simply have an Iframe. This works great for FireFox, Chrome, and IE (although IE does not work well with HTML5). However on Safari instead of scrolling the Iframe expands. Below is my holder page.
I've been testing with an IPad 3.
Thanks for any advice.
Joel
<html>
<head>
<title>Phone Internet</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<style type="text/css">
<!--
div.Title{font-family: Arial, Helvetica,sans-serif;font-size: 18px;}
div.Copy{font-family: Arial, Helvetica,sans-serif;font-size: 12px;}
#CellWindow{width: 320px;height: 480px;overflow:scroll}
-->
</style>
<script type="text/javascript">
<!--
if (navigator.userAgent.indexOf('MSIE') > -1){alert("This page is best viewed with Chrome, FireFox and Safari. Other browsers may not display
// -->
</script>
</head>
<body bgcolor="#808080">
<div align="center" class="Title">Mobile Phone HTML Examples</div>
<div align="center">
<iframe id="CellWindow" height="480" width="320" scrolling="yes" noresize="noresize" src=""></iframe>
</div>
<div align="center" class="Copy">©Joel Moses 2012</div>
<script type="text/javascript">
<!--
document.getElementById("CellWindow").src = "http://www.zendisoft.com/mobile/index.htm";
document.getElementById("CellWindow").style.height="480px";
// -->
</script>
</body>
</html>
Thanks for the help.
iPad 2
