Javascript 从iframe中检测父网站的媒体屏幕大小

我正试图根据父网站（呈现iframe的网站）更改承载在不同域上的iframe元素的设计

我的具体目标是仅针对iPhone 5（严格的iPhone 5）更改iframe中的一些设计组件。到目前为止，我通过传递

$（window）.width（）

和

$（window）.height（）

并在加载iframe时将它们作为url中的查询参数传递来获取宽度和高度。通过这种方式，我可以提前获得准确的宽度，并根据该宽度调整设计元素

有没有更好的方法来做到这一点，我还没有意识到，我仍在寻找如何准确地将目标定位在iPhone5

到目前为止，我在iPhone 5上使用此功能，但运气不佳：

if (window.matchMedia("@media only screen and (min-device-width : 320px) and (max-device-width : 568px)").matches) {
  /* jQuery CSS alternations goes here!! */
}

注意：我通过jQuery.css属性在iframe中创建和应用css属性。因此，检测应该只使用基于宽度的javascript，或者根据您所知的最佳方法

---

谢谢

对于JavaScript，如果

iframe

的域与父域相同，则可以使用：

parent.document.body.clientHeight

或

parent.document.body.clientWidth

如果您试图在不同的域中通过

iframe

使用该脚本，那么出于明显的安全原因，您将得到一个跨站点脚本错误

---

如果iframe的域与您需要使用的父域不同。

您可以使用

window.screen.height

和

window.screen.width

查找设备视口尺寸。即使从iframe也可以正常工作

为什么不尝试使用用户代理呢。领航员。userAget@ShoaibKonnur我刚看过，大多数的例子都是检测浏览器的。你能分享一个屏幕大小的例子吗？我也可以访问提供if数据的域，因此我已经处理了CORS问题。在这种情况下，你可以使用post消息将数据从父级传输到iframe，如底部链接的那样。