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

嗨我正在寻找帮助与我正在开发的移动网站。我试图在屏幕顶部有一个带有上一个和下一个按钮的工具栏，其中大部分视口显示包含第三方网站的iframe。帮助移动页面，固定div顶部和iframe

我有几个问题得到这个工作。首先是将工具栏固定在顶部。移动浏览器本身不支持固定位置，因此我已经实现了一个可行的解决方案，即使用window.onresize事件将工具栏移回屏幕顶部。由于移动浏览器禁用了touchstart和touchend事件之间的DOM渲染，因此我无法在滚动时移动div。

我现在遇到的主要问题是div工具栏在顶部正确显示，但iframe放大到它已加载的站点的左上角。你根本无法缩小。您只能进一步放大并平移网站。当它自己加载时，只能在100％的视口中真正查看iframe站点。

这里是什么，我想实现一个线框..

enter image description here

任何帮助，将不胜感激！

下面是我使用来实现这一代码的想法..

还有JavaScript的滚动时使用window.onresize事件的屏幕，修改#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>

来源

2011-08-15 lisburnite

您确定手机浏览器不支持固定位置吗？很高兴知道您正在测试哪些浏览器以及此时有哪些代码，以便我们能够更好地掌握并回答您的问题。 – Sheepy

阅读点4在下面.. http://developer.apple.com/library/ios/technotes/tn2010/tn2262/_index。html＃// apple_ref/doc/uid/DTS40009577-CH1-DontLinkElementID_5 CSS固定定位在iPhone和iPad上的Safari中运行，但不像您所期望的那样。虽然在Mac OS X和Windows上Safari中使用固定位置的元素始终保持在屏幕上，但在iPhone和iPad上的Safari中使用固定位置的元素在用户缩放和平移网页时最终会脱离屏幕。 – lisburnite

我在android和safari mobile上测试 – lisburnite

只是想我会以另一种方式在移动浏览器中做一个“固定”位置元素。您可以简单地给内容元素一个高度和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/

来源

2011-08-15 13:03:46

试过，它不会做我需要的。 iframe网站仍然显示放大。 – lisburnite