iOS Safari expands frameset larger than viewport

2019-09-06 08:35发布

问题:

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.

回答1:

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.



回答2:

AFAIK, <frame> and <iframe> two-fingers-scrolling behavior has been abandoned. Since iOS 4.X thoses elements are now resizing to their content's size.

As position:fixed; doesn't work either on iOS you can't block your SideMenu frame to let the rest scroll.

This library seems to provide an interesting workaround: http://cubiq.org/iscroll



标签: html ios safari