Question

您好我正在寻找我正在开发的移动网站的帮助。我正在尝试在屏幕顶部找到一个带有工具栏的页面，其中包含上一个和下一个按钮，大多数视口都显示包含第三方网站的iframe。

我有一些问题让这个工作。第一种是将工具栏固定在顶部。移动浏览器本身不支持固定定位，所以我已经实现了一个可行的解决方案，我使用window.onresize事件将工具栏移回屏幕顶部。滚动时我无法移动div，因为移动浏览器会在touchstart和touchend事件之间禁用DOM渲染。

我现在面临的主要问题是div工具栏在顶部正确显示，但iframe缩放到它已加载的网站的左上角。你根本无法缩小。您只能进一步放大并平移网站。

时，您只能在100％的视口中查看iframe网站。

这是我想要实现的线框。

enter image description here

非常感谢任何帮助！

这是我用来实现此目的的代码的想法..

当您使用window.onresize事件滚动屏幕时，还有javascript可以修改#wrapper的顶部和左侧css值。

<html>
<head>
<meta
     name="viewport"
     content="width=device-width; 
             initial-scale=1;
             maximum-scale=1;
             minimum-scale=1; 
             user-scalable=yes;"
    />
</head>
<body>
<div id="wrapper" style="width:320px;top:0;height:86px; position:absolute; z-index:1000; background-color:#FFFFFF; border-bottom:5px solid #4B90B7;">
<!-- Header markup -->
</div>
<div id="iframe" style="height: 750px;position:absolute; top:100px; width:100%" >

<iframe style="width:100%; height:100%">
<!-- iframe -->
</iframe>
</body>
</html>

Answer 1

我相信你现在已经开始了，但对于任何人谷歌搜索，我最终通过应用CSS Scale处理类似的情况。重新定位是一场彻头彻尾的噩梦，但你可以让它发挥作用。这适用于内联scrollview，我认为它适用于iframe：

问题/答案：Scale HTML content using JQuery Mobile & Phonegap

此外，可能值得研究ChildBrowser与iframe。我现在正在尝试它，但到目前为止它看起来很有用：

https://github.com/alunny/ChildBrowser

希望这可以帮助别人！

Answer 2

我以为我会用另一种方式在移动浏览器中做一个“固定”的位置元素。您可以简单地为内容元素指定一个高度overflow: auto。确保固定标题和内容元素的高度总和等于页面高度。

<div id="page">
    <div id="header">fixed header</div>
    <div id="content">...</div>
</div>

#page {
    position:relative;
}

#header {
    position: absolute;
    height: 1.5em;
}

#content {
    top: 1.5em;
    position:relative;
    overflow: auto;
    height: 400px;
}

示例：http://jsfiddle.net/william/BWA7j/

帮助移动页面，固定div在顶部和iframe下面

2 个答案: