Question

我正在使用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全宽？

Answer 1

这是一个可能有所帮助的替代方案：

   <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>

希望这会有所帮助。

如何在iPad上使用jQuery Mobile获取IFrame以占用整个宽度？

1 个答案: