iframe 中的嵌入式响应页面无法正确呈现答案

【问题标题】：embedded responsive page in iframe doesn't render correctlyiframe 中的嵌入式响应页面无法正确呈现
【发布时间】：2014-11-21 19:09:22
【问题描述】：

主页嵌入响应式移动页面，使用 JQUERY SUPERSLIDES 插件开发。如果直接在 IPHONE 上用 safari 加载，移动页面看起来很好。但是，当它嵌入到 iframe 时，它不会在 IPHONE 上按预期呈现（从下面的第二个屏幕截图中可以看到，只有部分图像可见）。

main.html

    <iframe id="ifrmadcontainer" seamless="seamless" scrolling="no" frameborder="0"     style="width:100%;height:100%;" src="touch.html">
    </iframe>

touch.html 在http://jsfiddle.net/w1vcrLy8/

它在桌面 Safari 和 Chrome 上的外观：

它在 iPhone Safari 上的外观：

【问题讨论】：

你的 JSFiddle 坏了，添加外部资源。我想你使用基于设备的媒体查询。因此，如果是这样，那么它不会处理小于设备的 iframe。
我可以毫无问题地打开 JSFiddle。我会尝试使用媒体查询
如果我们无法查看和测试代码，JSFiddle 将毫无用处。在这里，我们至少需要 CSS。以下是所有缺少的资源： css/normalize.css css/superslides.css css/layout.css images/IMG_0410.JPG images/IMG_0411.JPG images/IMG_0412.JPG javascripts/jquery/jquery-1.9.0.min.js javascripts /jquery.easing.1.3.js javascripts/jquery.animate-enhanced.min.js javascripts/hammer.min.js javascripts/jquery.superslides.js css/normalize.css css/superslides.css css/layout.css跨度>

标签： css responsive-design

【解决方案1】：

meta device-with 是否存在于 iframe 内部和嵌入它的页面外部？

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

【讨论】：