移动浏览器忽略iframe高度

Question

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

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

它没有帮助。

I帧：

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

主要观点：

.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. 在min-height代码的css代码中定义.main。
2. 创建代码的移动版本。

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

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

如果您需要其他信息，请点击此处：http://en.wikipedia.org/wiki/Responsive_web_design

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