I'm working on a web page that has a frameset containing a horizontal split; a sidebar on the left for a menu and a content area.
<!DOCTYPE html>
<html>
<head>
<title>Frameset Test</title>
</head>
<frameset border="0" cols="100,*">
<frame id="SideMenu" name="SideMenu" src="SideMenu.html" scrolling="no" />
<frame id="MainPage" name="MainPage" src="LongPageContent.html" scrolling="auto" />
</frameset>
</html>
In desktop browsers (including Safari), the frameset is set to the size of the viewport and a scrollbar appears for the long page content in the MainPage frame. In Safari on iOS, the frameset expands to the same size as the content in the MainPage frame, extending beyond the visible viewport.
I want the former behavior so that the page size remains the same as the viewport, regardless of the content in MainPage. I've fiddled around with the viewport meta tag, but adjusting the viewport does not modify the frameset behavior.
I know that Apple's iOS guidelines advise avoiding framesets since scrolling is more confusing (requiring two-finger scrolling in frames), but ditching the frames is not a great option.