使用javascript设置屏幕方向，宽度和高度

是否可以手动设置动态生成的iframe的屏幕属性？想要设置方向，宽度和高度以模拟该iframe的“移动”视图？使用javascript设置屏幕方向，宽度和高度

我已经创建了两个单独的小提琴：

父：https://jsfiddle.net/mooioom/69240vec/

“设备”：https://jsfiddle.net/mooioom/19tsk4L8/

母体是开放指向 “设备” 的iframe与iphone分辨率尺寸375x667
“设备”具有媒体查询以匹配iphone分辨率，以及应该将按钮颜色从绿色更改为黄色，如果检测不到，可能是因为检测到的screen.width和screen.height尺寸。

所以我怎样才能设置screen.width和“设备”在从父创建时间的screen.height。

---更新---

所以像Gezzasa说，如果媒体查询min-device-width更改为min-width它的工作原理，但为了得到一个完整的解决方案，我仍想知道如何使iframe“相信”它在移动设备中运行，我已经阅读过一篇文章，它涉及到修改头文件和用户代理，因为一些响应技术的目标是用户代理检查它的移动设备。

是抛开，问题仍然有效，如何动态地设置screen.width和screen.height（和方向）在iframe，从父窗口

来源

2017-01-25 levi

您是否可以编辑iframe的内容？想想在特定页面上进行简单的媒体查询就可以实现。 – Gezzasa

我可以编辑内容，并在iframe中使用移动媒体查询。哪些尺寸设置为适合移动像素尺寸，问题是iframe中的screen.width“screen.height”。正在反映我正在使用的真实屏幕，这是一个桌面...似乎CSS媒体查询是针对这些属性，而不是iframe的宽度和高度。 – levi

我可能会理解错误。这个示例http://www.w3schools.com/tags/tag_iframe.asp将创建iframe。宽度和高度很小（默认情况下），并显示www.w3schools.com的移动版本，因为w3schools上托管的媒体查询就是这样。您的媒体是否在正确的域名上进行查询，并且您是否为媒体查询下的iframe设置了宽度和高度？如果没有，恐怕我不能帮助你，除非你能够在jsfiddle中重新创建它。 – Gezzasa

查询的问题是，iframe不从设备加载，因此“min-device-width”将不起作用，因为它不是设备。如果您将其更改为“最小宽度”和“最大宽度”，则应该使用该设备。

来源

2017-01-25 09:56:57 Gezzasa

希望这可以帮助你

var view=document.getElementById("view"); 
 

 
var ifrm = document.createElement('iframe'); 
 
ifrm.setAttribute('id', 'ifrm'); 
 
view.appendChild(ifrm); 
 
var ifrmId=document.getElementById("ifrm"); 
 
ifrmId.style.width="200px"; 
 
ifrmId.style.height="200px";

<div id="view"> 
 

 
</div>

来源

2017-01-25 08:11:02

谢谢！但这实际上是我已经做的事情。我的问题不是iframe的物理尺寸，iframe.document等是iframe.screen对象，媒体查询是（我认为）针对... – levi

使用javascript设置屏幕方向，宽度和高度

回答

相关问题