苹果手机iframe撑大父页解决办法_iframe的table在ios中超出宽度-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39201210/article/details/81667320

本文介绍了一种解决iPhone浏览器中iframe触摸缩放导致页面显示异常的方法，通过监听iframe加载完成事件并动态调整其宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目中需要在自己页面里引入第三方页面，除了iframe我也不知道还有什么可以引入。

引入的页面是可以手触摸操作的，引入成功后安卓正常适应，可以手触摸操作，而苹果手机用手触摸放大时，iframe的宽也被放大了，变成了pc版。

1.试过将iframe外层盒子写死，页面宽度写死，然而iframe还是会被撑开，页面被撑大。（失败）

2.试过给iframe外层盒子overflow hidden 但是这样的话iframe依旧撑大，超出的也只是隐藏了看不见（失败）

3.只有给iframe写一个死width并且加！important才能避免iframe放大（然而这样的话不同的手机无法自适应）

最终解决如下：

	<div style='width:100%;height:100%;overflow: hidden;'>
		<iframe id="iframe1" src="https://www.lifeccp.com/viewer/viewer.html?studyUID=1.2.840.10008.5.1.4.31.2902478067.10512.1533784252.649&userId=2777&sessionId=DA30E3E9A35D28D04FCF9994CDC7050C&hospitalId=562" height="90%";  frameborder="0" scrolling="no"></iframe>
	</div>

document.getElementsByTagName('iframe')[0].addEventListener('load',function(){
	 	var wid = window.screen.width;
		$('#iframe1')[0].style.cssText ="width:"+wid+"px !important;";
})

//在iframe页面加载完成后，给iframe设置等屏幕宽度 并且！important