Html – iOS Safari expands frameset larger than viewport

htmliossafari

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.

Best Answer

The safari Web Content Guide states that this is normal behavior. The frame will expand encompass your content and you will not be able to scroll.

I am sorry, but you are going to have to ditch the frames.

You can either code the side Nav into each page (which is terrible) or put something together in PHP that will load the contents of SideMenu dynamically into a column.

Related Topic