如何基于父页面屏幕宽度在iframe内应用CSS媒体查询

我的Web应用有两种运行方式：桌面端以固定宽度右对齐的iframe形式渲染，移动端则全屏运行。我需要在iframe文档内编写仅对移动设备生效、不作用于桌面端的CSS规则。

我们的应用分为两款产品：独立应用（非iframe形式）和嵌入客户网站的内嵌应用（iframe形式）。两者样式要求不同：独立应用采用统一全局样式，内嵌应用必须匹配各客户网站的配色方案。

在给某客户做移动端网站集成时，发现其页面包含<meta name="viewport" content="width=320">标签，会放大所有元素，且我们无权修改该标签。因此需要针对该客户内嵌应用的移动端视图单独应用CSS规则，修复元素放大问题。

尝试过的CSS媒体查询 #

max-width 查询 #

标准的max-width查询无法满足需求，因为桌面端的iframe本身宽度较小，会被误判为移动端，导致规则同时在两端生效：

@media screen and (max-width:480px) {
   ... /* 该规则在移动端和桌面端都会生效 */
}

max-device-width 查询 #

后来尝试了max-device-width，它检测设备宽度而非文档宽度，起初似乎可行：

@media screen and (max-device-width:480px) {
   ... /* 该规则仅在移动设备上生效 */
}

但存在两个问题：

• device-width查询已被弃用
• 在桌面端的移动模拟器（如Chrome）中，它会识别桌面屏幕宽度，导致移动端CSS规则无法生效

我需要的是：能在iframe内生效，仅当顶层文档宽度小于480px时触发的媒体查询，或者说只针对真实移动设备和移动模拟器生效的规则，该怎么写？

内容的提问来源于stack exchange，提问作者Irwan