3

Android（Dolphinブラウザ）でデスクトップスタイルのiframeを模倣しようとしていますが、成功しています。使用されるトリックは、 with を固定サイズの and 内に配置し、<iframe>jQuery Mobile position:relative;(または単に vmouse イベント) を使用してスクロール用のマウス イベントを処理することです。<div>overflow:hidden;

1 つのことを除いて、これはすべて正常に機能します。はクリップされていますが、<iframe>コンテンツはサイズに合わせてブラウザーを引き伸ばします。これは主に高さで顕著です。

JSFiddle の簡略化されたコード例は次のとおりです: http://jsfiddle.net/euKhG/

そして、Android ブラウザー内で見る結果は次のとおりです: http://jsfiddle.net/euKhG/embedded/result/ (Android ブラウザーでのみ動作します!)。

この問題を解決する方法を知っている人はいますか? 私は iScroll と同様のものを他の場所で提案しているのを見たことがありますが、このようなリモコンでフレームに触れているようですsrc。

4

2 に答える 2

2

メタタグにtarget-densitydpiを設定してみてください

    <meta id="viewport" name="viewport" content="initial-scale=1, user-scalable=no, width=device-width, target-densitydpi=160dpi"/>

ただし、これに関しては他のすべてのcssも変更する必要があります

于 2012-09-13T11:22:00.793 に答える
0

うーん、ここで何かを逃したと思います。現在、iFrame が切断されていますが、overflow:scroll を設定したためでも、コンテナ フレームの幅/高さプロパティを設定したためでもありません。現在表示されているカットオフは完全に恣意的なものです。

これを証明するために、コンテナ div に background:#ff0000 を追加すると、iframe のカットオフ領域を定義するのは実際には div の幅/高さではなく、いくつかの「デフォルト」の iframe ディメンション プロパティであることがわかります: http: //jsfiddle.net/kauUr/

私のお勧めは、あなたの div が固定サイズであると言った場合、同じサイズの幅/高さのプロパティで iframe を設定して、一致するようにすることです。width 属性と height 属性を使用してこれを行うか、コンテナ div で行ったのと同じように css を使用してよりクリーンに行うことができます。iFrame に正しい幅/高さを指定すると、カットオフは期待どおりになり、ブラウザーは iframe のコンテンツのサイズではなく、指定したサイズにスクロールする必要があります。実際、div のサイズが事前にわからない場合でも、Javascript を使用してそれらを取得し、実行時に iFrame のサイズを正しく設定できます。

<div style="width: 400px; height: 400px; overflow: scroll; background:#ff0000">
    <iframe style="width: 400px; height: 400px" src="http://doc.jsfiddle.net" frameborder="0" scrolling="no"></iframe>
</div>​

それでもうまくいかない場合はoverflow:none、iframe スタイルでも平手打ちしてみてください。

于 2012-04-23T00:58:30.373 に答える