iphone在iframe頁面的寬度不受父頁面影響，避免撐開頁面

工作中有個需求，就是產品頁面通過iframe引用顯示產品協議頁，要求不要橫向滑動，只需要豎向滑動，但在iphone中引用的iframe會撐開父頁的寬度，而在android端瀏覽器這不會。

 <div style="width: 100%; height: 300px; overflow-x: hidden; overflow: scroll; -webkit-overflow-scrolling: touch;">
      <iframe src="contract.html" name="contract" width="100%" height="300" scrolling="no" frameborder="0"></iframe>
</div>

通過在iframe添加一滑動層，overflow-x: hidden; 會直接將iframe超出的部分隱藏掉，可以知道超出不是iframe的寬度。具體超出的寬度是怎么來的，在網上沒找到原因。（希望大俠們指點，謝謝）

 

所以只能只能對iphone和ipad端做個兼容，修改iframe頁面body頁面寬度。將其設置為頁面實際寬度相對與屏幕寬度比（設備的寬度）。

//適配iphone上iframe寬度不是chengk頁面的寬度不受父頁面
window.onload = function(){
     alert("網頁可見區域寬："+document.body.clientWidth+"\n 屏幕可用工作區寬度："+ window.screen.availWidth+"\n");

     if (!navigator.userAgent.match(/iPad|iPhone/i))
          return false;
     //如果是iphone,ipad，則重新修改body寬度值
     document.body.style.width = (window.screen.availWidth/document.body.clientWidth)*100+'%';
}