2

jQuery Mobile ライブラリを使用しています。次のように IFrame を表示しています。

<iframe width="100%" height="600" frameborder="0" title="Content" src="https://c.na6.content.force.com/servlet/servlet.FileDownload?file=00P8000500D26o6EAB" name="docframe" id="docframe"></iframe>

デスクトップ ブラウザーで表示すると、iFrame が幅全体を占めます。iPad では、iFrame が使用可能なスペースの約 50% を占めているように見えます。iFrame は、そのサイズを 50% に制限するものに含まれているようには見えません (つまり、グリッド内にあるようには見えません...)。

iFrame を全幅にするには、どのようなことを試みる必要がありますか?

4

1 に答える 1

0

役立つ可能性のある代替手段を次に示します。

   <head>
       <script type="text/javascript">
       function jqUpdateSize(){
            // Aspect ratio of the video's height and width. For eg: 360/480 
            var aspect_ratio = <height of the video>/<width of the video>;
            // Get the dimensions of the content div
            var width = $('#iframes-div-container').width();
            var height = width * aspect_ratio;

            $('#video-iframe').css("width",width);
            $('#video-iframe').css("height",height);
        };
        $(document).ready(jqUpdateSize);    // When the page first loads
        $(window).resize(jqUpdateSize);     // If the browser's size changes
        </script>
    </head>
    <body>
    <div data-role='page'>
     .
     .
     <your code>
     .
     .
     <div data-role="content" id="iframes-div-container">
        <center>
          <iframe id="video-iframe" src="https://c.na6.content.force.com/servlet/servlet.FileDownload?file=00P8000500D26o6EAB" frameborder="0" allowfullscreen></iframe>
        </center>
     </div> 

    </div>
    </body>

お役に立てれば。

于 2013-11-19T18:47:46.227 に答える