幫助移動頁面，固定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