モバイルページのヘルプ、下のiframeの上と下の固定div

こんにちは、私は開発しているモバイルサイトのヘルプを探しています。前と次のボタンがある画面の上部にツールバーがあるページを取得しようとしています。ほとんどのビューポートには、サードパーティのウェブサイトがあるiframeが表示されます。モバイルページのヘルプ、下のiframeの上と下の固定div

私はこの問題を解決するためにいくつかの問題があります。最初はツールバーを一番上に固定します。モバイルブラウザは固定的な配置をネイティブにサポートしていないので、window.onresizeイベントでツールバーを画面の先頭に戻すことができる、実行可能なソリューションを実現しました。モバイルブラウザでは、タッチスタートとタッチイベントの間でDOMレンダリングが無効になるため、スクロール中にdivを移動することはできません。

私が今直面している主な問題は、divツールバーが正しく表示され、iframeがロードされたサイトの左上隅にズームされるということです。まったくズームアウトすることはできません。さらにズームインしてサイトをパンすることしかできません。 iframeサイトが表示されるのは、それが単独でロードされたときのビューポートの100％です。ここで

は、すべてのヘルプははるかに高く評価されるだろう

enter image description here

..私は達成するために何をしたいのワイヤーフレームです！

は、ここで私はこれを達成するために使用しているコードの考えです。..

あなたはwindow.onresizeイベントを使用して画面をスクロールするとき#wrapperの上部と左のCSSの値を変更javascriptのもあります。

<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 iPhoneとiPadのSafariでは、CSSの固定位置付けが機能しますが、期待通りに機能しません。 Mac OS XおよびWindowsのSafariで固定位置を使用する要素は常に画面上にとどまりますが、iPhoneおよびiPadのSafariで固定位置を使用する要素は、ユーザーがWebページを拡大/縮小して画面外になることがあります。 – lisburnite

アンドロイドとサファリモバイルでテスト中 – 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

私は、あなたが今では上に移動しましたが、グーグルで、誰のために、私はCSSのスケールを適用することにより、似たような状況に対処することになったと確信しています。再配置は全くの悪夢だったが、それを働かせることができる。これは、インラインscrollview上で動作し、私はそれがIFRAMEに働くだろうと仮定します。ここで

質問/答え：またScale HTML content using JQuery Mobile & Phonegap

が、それはIFRAME対ChildBrowserに探して価値があるかもしれません。私は今それを試してんだけど、今のところそれは便利になります。

https://github.com/alunny/ChildBrowser

希望これが誰かを助けることができます！

出典

2012-02-25 15:38:54 jstafford

モバイルページのヘルプ、下のiframeの上と下の固定div

答えて

関連する問題