iOS Safari 扩展框架集大于视口

Posted 2023-02-23

技术标签:

【中文标题】iOS Safari 扩展框架集大于视口【英文标题】：iOS Safari expands frameset larger than viewport 【发布时间】：2011-01-20 18:12:08 【问题描述】：

我正在处理一个包含水平拆分框架集的网页；左侧的侧边栏用于菜单和内容区域。

<!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>

在桌面浏览器（包括 Safari）中，框架集设置为视口大小，并且在 MainPage 框架中为长页面内容显示滚动条。在 ios 上的 Safari 中，框架集扩展为与 MainPage 框架中的内容相同的大小，超出了可见视口。

我想要前一种行为，以便页面大小保持与视口相同，而不管 MainPage 中的内容如何。我已经摆弄了视口元标记，但调整视口不会修改框架集的行为。

我知道 Apple 的 iOS 指南建议避免使用框架集，因为滚动更加混乱（需要在框架中用两指滚动），但放弃框架并不是一个好选择。

【问题讨论】：

【参考方案1】：

Safari Web 内容指南指出这是正常行为。框架将展开，包含您的内容，您将无法滚动。

我很抱歉，但你将不得不放弃框架。

您可以将侧导航编码到每个页面中（这很糟糕），或者在 php 中将一些东西放在一起，将 SideMenu 的内容动态加载到列中。

【讨论】：

【参考方案2】：

AFAIK、<frame> 和 <iframe> 两指滚动行为已被放弃。从 iOS 4.X 开始，这些元素现在正在调整大小以适应其内容的大小。

由于position:fixed; 在 iOS 上也不起作用，因此您不能阻止 SideMenu 框架让其余部分滚动。