Javascript 限制iframe宽度

第二个问题，也是今天的第二个问题。我正在使用Intel SDK以HTML5/Javascript编写一个web/mobile应用程序

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

我从一个名为like so的iframe开始：

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

来设置src，这工作正常

然而，由于网页的加载量大于我手机屏幕的大小，因此无论我如何限制其宽度，它都会使iframe的宽度达到网站所需的宽度

理想情况下，我希望将框架网站“压缩”到应用程序中屏幕的宽度（应用程序是响应大小的，因为XDK会自动这样做），但我会满足于使用可用空间的iframe，并允许我滚动框架，而不是整个应用程序滚动

我试过：

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

我曾尝试在周围的div中添加100%的宽度。我甚至尝试在iframe本身和周围div中将iframe宽度（如上所述）限制为iphone 6的分辨率宽度（宽度=370），但这两种方法都不起作用-无论我做什么，框架一旦从上面提供了src，只需将其完全放大，并使应用程序横向滚动即可

有什么想法吗？我在读一些人们通常用来嵌入youtube视频的技巧

---

标准道歉-total noob，我认为这可能比我做的要简单。

我不确定这是否是您想要的，但您可以使用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" />

.缩放{
-ms变换：标度（0.5,0.5）；
-webkit变换：比例（0.5,0.5）；
变换：比例（0.5,0.5）；
宽度：500px；
}

你可以找到更多的信息

这实际上会“缩放”（或者说“挤压”）元素，使其内容更小。如果您找不到适用于您的场景的“硬编码”值，可能需要使用JavaScript计算该比率

而且，如果您愿意，您仍然可以在

iframe

本身上设置

width

，以指定所需的实际大小。 也许您可以使用

100vw

而不是像素来关联视口的100%宽度

---

由于大部分内容都是CSS3内容（

transform

，

vw

），在使用此方法之前，您应该确保访问站点的浏览器支持这些功能。

当我使用CSS设置宽度时，它确实起作用。你试过使用CSS吗？我还没有，我会尝试一些CSSTry在CSS

border:0中将border设置为0

或将

frameborder=“0”

属性添加到iframe标记。我一回到办公桌前就要尝试一下。嘿，谢谢你，今晚我和transform玩了一个游戏，最后我完成了这个把戏：我所需要做的就是使用transform origin将其粘贴到“左上角”，否则iframe在屏幕外加载得很好，需要滚动才能找到它。

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