Question

第二个问题，今天第二个问题。我正在使用英特尔SDK在HTML5 / Javascript中编写Web /移动应用程序。

在解决了我之前遇到的JSON问题之后我现在遇到了限制iframe宽度的问题 - 这看起来应该很简单，但我显然遗漏了一些东西。

我开始使用iframe这样的iframe：

<div class="widget uib_w_6 d-margins" data-uib="media/iframe" data-ver="0">
<iframe id="myframe"></iframe>
</div>

然后我用

document.getElementById('myframe').src = "http://URL.here" + productName;

设置src，这样可以正常工作。

但是，由于网页的加载量大于手机屏幕的大小，因此无论我如何限制其宽度，它都会使网站的iframe变宽。

理想情况下，我想挤压＆＃39;框架网站在应用程序中的屏幕宽度（应用程序是响应大小，因为XDK会自动执行此操作），但我会使用可用空间来定居iframe并允许我滚动框架，而不是而不是整个应用程序滚动。

我试过了：

<iframe id="myframe" width="100%"></iframe>

我尝试在周围的div中添加100％的宽度。我甚至尝试将iframe宽度（如上所述）限制在iframe本身和周围div中的iphone 6（宽度= 370）的分辨率宽度，并且都不起作用 - 无论我做什么，框架，一旦从上面提供了它的src，只需要完整的大小并使应用程序向侧面滚动。

有什么想法？我正在阅读人们使用的技巧，这些技巧似乎通常用于嵌入youtube视频...

标准道歉 - 总的菜鸟，我认为这可能比我做的更简单。

Answer 1

我不确定，如果这是您正在寻找的内容，但您可以使用CSS3转换来扩展元素：

<style>
    .scaled {
        -ms-transform: scale(0.5,0.5);
        -webkit-transform: scale(0.5,0.5);
        transform: scale(0.5,0.5);
        width: 500px;
    }
</style>

<iframe src="http://some.target.url/page" class="scaled" />

您可以找到更多信息here。

这实际上是＆＃34; zoom＆＃34; （或＆＃34;挤压＆＃34;如你所说;））元素，使其内容更小。也许您需要使用JavaScript计算比率，如果您无法找到＆＃34;硬编码＆＃34;总是适用于您的场景的价值。

并且，如果您愿意，您仍然可以在width本身设置iframe，以指定您想要的实际尺寸。也许您可以使用100vw而不是像素来与视口宽度的100％相关联。

由于大部分内容是CSS3内容（transform，vw），因此在使用此方法之前，应确保访问该网站的浏览器支持这些功能。

限制iframe宽度

1 个答案: