我有以下HTML代码：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title> Test iFrame </title>
</head>
<body>
<div id="container">
<div id="top-banner">
<div id="offdeck-ads-div" class="offgroup" style="height: 69px; padding-top: 2px; padding-bottom: 0px; margin: 0px auto; background-color: rgb(221, 221, 221); position: relative; box-shadow: rgb(0, 0, 0) 0px 2px 3px; -webkit-box-shadow: rgb(0, 0, 0) 0px 2px 3px; z-index: 50; clear: both; background-position: initial initial; background-repeat: initial initial;">
<div id="ads" style="width:100%;text-align:center;">
<div align="center">
<a href="#" accesskey="">
<img src="http://telkomselprod.amobee.com/content/4040581/85733614/85733613.gif" alt="">
</a>
</div>
</div>
<hr style="margin-top:2px; padding-top:0px; padding-bottom:0; margin-bottom:1px;">
<div id="toolbar" style="width:100%; text-align: center;">
<div style="width:300px; margin: 0px auto;">
<div style="text-align:right; width: 295px; display:inline-block; height:12px; vertical-align: top;">
</div>
</div>
</div>
</div>
</div>
<div id="middle">
<div id="left-banner">
</div>
<div id="content">
<iframe id="main-frame" scrolling="no" src="http://www.shopious.com/" height="7367" style="height: 7367px;">
</iframe>
</div>
<div id="right-banner">
</div>
</div>
<div id="bottom-banner">
</div>
</div>
<div id="showbutton" class="sh-div sh-div-top-bottom sh-div-top " style="display: none;"><span class="showbar"><a id="btn-show" href="javascript:void(0)" style="padding: 5px; font-size: 10px; font-family: verdana; color: black; text-align: center; font-weight: bold; text-decoration: none;">show ad</a></span></div>
</body>
</html>
当我尝试在iPhone中打开此html时，我网站的响应能力消失了。它显示了我网站的全部宽度。我该如何防止这种情况发生？我认为这个问题与viewport有关，但我不确定如何。
重现问题的简便方法是复制并粘贴上面的html并将其打开到iPhone模拟器中。