网页结构：
<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%，但是在手机端为什么就显示不对？
请问这是为什么，如何解决这个问题？