iOS - 在 HTML 中更改 iFrame 标签的宽度答案

【问题标题】：iOS - Change width in iFrame tag in HTMLiOS - 在 HTML 中更改 iFrame 标签的宽度
【发布时间】：2015-01-17 12:11:05
【问题描述】：

我正在使用字符串请求加载UIWebView。在我的 html 字符串中，我有 iframe 标签，其中它的宽度值比预期的要大得多。如何更改该值？

我的 html 字符串 -

<html> 
<head> 
<style type="text/css"> 
body {font-family:"Helvetica"; font-size: 18;} img {max-width: 100%; width: 100%; height: 100%};
</style> 
</head> 
<body><p><span style="font-size: 13px; line-height: 1.6em;">***Some Text***.</span></p>

<p>***Some Text***.</p>

<p><iframe allowfullscreen="" frameborder="0" height="360" src="//www.some-domain.com/embed/mwOFWJUOpv8" width="600"></iframe></p></body>

如您所见，iframe 标签中的 width=600 导致 iPhone 出现问题。我该如何改变呢？

我已经通过以下代码管理图像，我想管理iframe。

目前已实现的代码 -

NSString *str = [NSString stringWithFormat:@"<html> \n"
                          "<head> \n"
                          "<style type=\"text/css\"> \n"
                         "body {font-family:\"%@\"; font-size: %@;} img {max-width: 100%%; width: 100%%; height: 100%%};\n"
                          "</style> \n"
                          "</head> \n"
                          "<body>%@</body> \n"
                         "</html>", @"Helvetica", [NSNumber numberWithInt:iWebViwFontSize], strHtml];
webViwNewsDescription loadHTMLString:str baseURL:baseURL];

【问题讨论】：

标签： html ios css iframe uiwebview

【解决方案1】：

尝试使用 @media 和目标屏幕宽度低于 X px 。例如 700 px，并在 CSS 中添加：

.frame {
    -moz-transform: scale(0.5);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.5);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 0 0;
}

编辑 (0.5) 值以满足您的需要。比这将缩小 iframe 中的内容。我没有通过 iPhone 测试过，但它应该可以工作。

HTML：

<iframe class="frame"

编辑：

将此添加到您的 CSS 文件中。

@media screen and (max-width: 700px) {
    .frame {
        width:400px; /*or whatever width you'd like*/
        /*Here you can scale down the content in the iframe if it is too wide for the iframe*/
        -moz-transform: scale(0.5);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.5);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.5);
        -webkit-transform-origin: 0 0;
    }
}

PS：如果你不太了解 CSS，我添加这个只是为了帮助你：

在普通 css中，添加：

.iframe{width:600px;}

那么所有屏幕的宽度都是 600 px，但对于小于 700 px 的屏幕，其他 CSS 会起作用。

【讨论】：