网站里插入jsfiddle，在手机端显示宽度有问题

发布于 2022-09-03 12:40:28 字数 1376 浏览 53 评论 0

网页结构：

<body>
    <div id="wrap">
        <div id="post-wrap">
            <div class="post">
                <div class="post-content">
                <p>blahblah</p>
                <p>
                    <script async="" src="https://jsfiddle.net/blahblah/"></script>
                    <iframe src="https://jsfiddle.net/blahblah/" id="JSFEMB_17032" width="100%" height="196" frameborder="0" sandbox="allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
                </p>
                </div>
            </div>
        </div>
    </div>
</body>

#wrap的width是100%，别的文字都是按照浏览器宽度100%了，但是jsfilddle的宽度...
在chrome或者ff里用开发者模式里使用响应式设计的时候是正常显示的，如图↓
图片描述
但是在手机里的效果...如图↓

上述代码中<iframe src="https://jsfiddle.net/blahblah/" id="JSFEMB_17032" width="100%" height="196" frameborder="0" sandbox="allow-forms allow-popups allow-scripts allow-same-origin"></iframe>是在PC端使用开发者模式查看的，明明iframe的宽度是100%，但是在手机端为什么就显示不对？
请问这是为什么，如何解决这个问题？