移动浏览器忽略 iframe 高度答案

【问题标题】：mobile browsers ignore iframe height移动浏览器忽略 iframe 高度
【发布时间】：2014-08-03 17:40:23
【问题描述】：

我已经为 iframe 定义了高度，但移动浏览器会忽略高度（firefox 除外）。在桌面浏览器上没有问题。它也忽略了我的主要 div。 iframe 在主 div 中。我试过了：

overflow: auto;
-webkit-overflow-scrolling:touch;

没用。

内嵌框架：

 <div class="main">
<iframe id="webmaster_frame_id" name="webmaster_frame_name" src="http://lshunter.net/ls/index.php?option=com_lsh&view=lsh&layout=webmaster&tmpl=component&sections=1&font_type=Times New Roman&font_size=11px&start_time_eventtitle_font_size=12px&tvname_font_size=12px&tz_name_font_size=12px" width="790" height="600" scrolling="auto" align="top" frameborder="0">Your browser does not support frames, so you will not be able to view this page.</iframe>
   </div>

主 div css：

.main {
    height: 1150px;
    width:100%; 
    margin-left:auto;
    margin-right:auto;
    margin-top: -66px;
    opacity: 0.83;
    background-color: #FFFFFF;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px; 
}

这是它在移动浏览器上的外观。

【问题讨论】：

标签： html css iframe mobile

【解决方案1】：

高度对于移动浏览器来说太高了...如果您希望 iframe 正常工作，我有两个解决方案供您使用：

在 .main 代码的 css 代码中定义一个 min-height。
创建代码的移动版本。

对于第二种解决方案，有一个例子：

/* mobile CSS */
@media screen and (max-width: 480px)
{
    .main {
         height: 480px;
     }
}

如果您想了解更多信息，请在此处查看：http://en.wikipedia.org/wiki/Responsive_web_design

响应式网页设计示例：CSS Zen Garden

【讨论】：