iFrame和媒体查询问题 [英] iFrame and media query issue

问题描述

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

I have an issue with the styles inside media queries for the content inside iFrame. I have an iFrame embedded in our site. We have styles for the contents inside iFrame. My iFrame width is 480px. I have a media query @media screen and (max-width: 480px) inside this I am adding styles to the content inside iFrame.

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

The problem is that, when opening the page in desktop browser of size 1900px width, (iFrame size is the same 480px), the styles inside media query of max-width: 480px is getting applied. But when I open the same page in iPad its not considering the iFrame width for a media query and taking screen width and applying 768px width media query styles.

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

As per my knowledge it has to take the iFrame width and iFrame width media query styles has to be rendered, since iFrame contains the entire html page. Please let me know how to fix the iPad issue.

推荐答案

iframe宽度也取决于视口，所以尝试设置一些东西像这样：

The iframe width is also dependent on the viewport, so try setting something like this:

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

此外，如果您想定位像ipad这样的特定设备，并且您在iframe中有内容您可以考虑使用min-device-width来确定您的iframe是否在特定设备中。

Furthermore, if you want to target a particular device like an ipad, and you have content in an iframe you might consider using min-device-width to determine if your iframe is within a particular device.

这篇关于iFrame和媒体查询问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！