2

iframe を含めることができ、iPad、Android、iPhone などのタッチ ブラウザーとデスクトップ ブラウザーの両方で適切に機能するポップアップ プラグイン (fancybox など) が必要です。タッチ ブラウザをつまむと、Fancybox の動作がかなりおかしくなりました。私が本当にそれをする必要があるのは：

  1. iframe を含む
  2. タッチブラウザでズームインすると、トップページが飛び散ることなく左右にスクロールできます。ページ内の他の要素と同様に動作する必要があります。
  3. （たとえば）幅800ピクセル、ビューポートの高さの90％であると言えるはずです
  4. ビューポートのサイズが変更された場合は、できればリフローする必要があります
  5. 後ろのページがスクロールする場合は、ページの中央に配置する必要があります。
4

2 に答える 2

2

デフォルトの Fancybox2 には、タッチのサポートが組み込まれています。ソースを見るとisTouch、コード全体で使用されている変数とデフォルト設定が表示されます。デフォルト設定autoCenterのデフォルト値は です!isTouch。モバイル ブラウザでは、あまりサポートされていないため、中央に配置されません。これらのデフォルトをテストすることをお勧めします。

    <script>
        $(document).ready(function() {
            $('#selector').fancybox({
                modal: false
                ,type: 'iframe'
                ,minWidth: 960
                ,height: '90%'
                ,closeClick: false
                ,padding: 0
                ,scrolling: 'no'
                ,autoSize      : false
                ,helpers: {
                    overlay :{
                        closeClick:false
                        ,speedOut:0
                        ,showEarly:true
                    }
                }
            });
        });
    </script>

...

于 2013-01-07T15:16:23.037 に答える
2

jQueryUI Dialogはどうですか？

私の経験では、モバイル デバイスで適切に動作し、ダイアログ コンテンツとして iframe をサポートしています。

于 2013-01-04T16:17:41.983 に答える