html - 移动浏览器忽略 iframe 高度

Question

我已经为 iframe 定义了高度，但移动浏览器会忽略高度(Firefox 除外)。在桌面浏览器上没有问题。它也忽略了我的主分区。 iframe 在主分区中。我试过了:

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

这是它在移动浏览器上的样子。

Answer 1

移动浏览器的高度太高...如果您希望 iframe 正常工作，我有两种解决方案:

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

对于第二种方案，有一个例子:

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

如果您需要更多信息，请查看此处:http://en.wikipedia.org/wiki/Responsive_web_design

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