iphone在iframe页面的宽度不受父页面影响，避免撑开页面-CSDN博客

工作中有个需求，就是产品页面通过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+'%';
}

转载于:https://www.cnblogs.com/qiuer/p/6420130.html