The problem is likely due to the layout of your page.
I'm not sure that Mobile Safari always plays nice with 100% height framesets.
In landscape mode, it looks like Mobile Safari is not taking into account the address bar (at the top) and/or the toolbar (at the bottom).
You could try setting heights for each of your frames (using a 'height' or 'style' attribute) on the page containing the frames ('index2.html') but I'm not sure that this will help.
<frame src="menu.html" noresize="noresize" name="leftFrame" scrolling="No" id="leftFrame" title="Menu" height="100%" style="height: 100%;" />
<frame src="port.html" name="mainFrame" id="mainFrame" title="Port" height="100%" style="height: 100%;" />I think you might be better off replacing your frameset layout with a CSS solution.
Take a look at the Side Menu example in the Using a Resizable Gallery with a Header support section.
this is essentially the layout that you are looking to achieve (a side menu with a fixed width for your logo and site navigation) and the gallery takes up the remainder of the available space (without the need for any scrollbars).
This should work on all platforms without any clipping.
You can examine the source of the demo page in your browser and copy/modify the code to suit your own needs.
Here is a single page example that you might like to try.
To see it in action, just create a sample gallery in JuiceboxBuilder-Pro and use the code below as your gallery's 'index.html' page.
You can add your own content to the 'menu' <div> and change the styling (colors, fonts, menu width, etc.) if you like.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
background-color: #222222;
margin: 0px;
}
#menu {
background-color: #222222;
color: #666666;
font-family: sans-serif;
font-size: 20px;
float: left;
height: 100%;
text-align: center;
width: 100px;
}
#wrap {
float: right;
height: 100%;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb;
function doLayout() {
var windowHeight = parseInt(window.innerHeight ? window.innerHeight : $(window).height(), 10);
var windowWidth = parseInt(window.innerWidth ? window.innerWidth : $(window).width(), 10);
var menuWidth = parseInt($('#menu').outerWidth(true), 10);
var galleryWidth = windowWidth - menuWidth;
$('#wrap').height(windowHeight);
$('#wrap').width(galleryWidth);
if (jb) {
var galleryWidth = parseInt($('#wrap').innerWidth(), 10);
jb.setGallerySize(galleryWidth, windowHeight);
}
}
$(document).ready(function() {
$(window).resize(doLayout);
jb = new juicebox({
containerId: "juicebox-container"
});
doLayout();
});
</script>
<title>Test</title>
</head>
<body>
<div id="menu">
<span>Menu</span>
</div>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
</body>
</html>I hope this helps or at least points you in the right direction.
