移动端嵌入iframe后内容异常缩小适配问题求助

问题原因 #

• 核心问题是当前父页面未配置移动端视口meta标签，移动浏览器默认会采用980px宽度的虚拟视口渲染页面，再整体缩放适配设备物理屏幕，直接导致iframe内的内容被等比缩小。
• 代码中.container设置的width:50%属于冗余样式，iframe采用绝对定位已经脱离文档流，父容器的宽度限制不会生效。

修复方案 #

1. 首先在页面<head>标签中添加移动端视口配置，告诉浏览器以设备实际宽度作为渲染视口，禁用默认缩放行为：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 清理冗余代码，优化iframe全屏适配逻辑，修改后完整可用代码如下：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
body {
   margin: 0;
   overflow: hidden;
}
#iframe1 {
    display: block;
    width: 100vw;
    height: 100vh;
    border: none;
}
</style>
</head>
<body>
<iframe id="iframe1" name="iframe1" frameborder="0" src="https://just4metin.ro/"></iframe>
</body>
</html>

以上修改完成后即可解决移动端iframe内容缩小的问题，你嵌入的目标站点本身已经做了响应式适配，不需要额外调整站点侧的配置。

内容的提问来源于stack exchange，提问作者Razvan V