iOS Safari expands frameset larger than viewport_问答_开发者

iOS Safari expands frameset larger than viewport

开发者 https://www.devze.com 2023-02-05 14:25 出处：网络

I\'m working on a web page that has a frameset containing a horizontal split; a sideba开发者_Python百科r on the left for a menu and a content area.

相关专题：

I'm working on a web page that has a frameset containing a horizontal split; a sideba开发者_Python百科r 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.

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.

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