iFrame和媒体查询问题

Kal*_*r S 2 iframe media-queries

我对iFrame中内容的媒体查询内部的样式存在问题.我在我们的网站上嵌入了iFrame.我们有iFrame内容的样式.我的iFrame宽度是480px.我有一个媒体查询@media屏幕和(max-width:480px)我在iFrame内容中添加样式.

问题是,当在大小为1900px宽度的桌面浏览器中打开页面时(iFrame大小相同为480px),最大宽度:480px的媒体查询内的样式正在应用.但是当我在iPad中打开同一页面时,它不考虑媒体查询的iFrame宽度,并采用屏幕宽度和应用768px宽度的媒体查询样式.

据我所知,必须呈现iFrame宽度和iFrame宽度媒体查询样式,因为iFrame包含整个html页面.请告诉我如何解决iPad问题.

use*_*694 6

iframe宽度也取决于视口,因此请尝试设置如下内容:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0;" />
Run Code Online (Sandbox Code Playgroud)

此外,如果您想要定位特定设备(如ipad),并且您在iframe中有内容,则可以考虑使用min-device-width来确定您的iframe是否在特定设备中.