- bounty将在5天后过期**。回答此问题可获得+50声望奖励。Nilton Schumacher F希望引起更多人关注此问题。
我有一个网站，我可以在路径localhost:3000/static上呈现一个简单的Html页面，在正常路径localhost:3000/上呈现一个3d场景。我尝试执行的是媒体查询转换，它只会在路径为localhost:3000/static时应用，但不会在iframe中应用。因为移动iframe（路径：localhost:3000/）显示为它是在移动，但我希望它显示如果它是在桌面上，而不应用@medias。
下面是css以及页面是如何在iframe中呈现的：
.htmlScreen iframe {
width: 1500px;
height: 700px;
border: none;
background: #000;
}
<Html
transform
prepend
wrapperClass="htmlScreen"
scale={0.35}
distanceFactor={1.17}
zIndexRange={[0, 0]}
>
<div
onClick={(e) => {
if (!isFocusOnHtml) e.preventDefault();
}}
onPointerEnter={(e) => {
if (isFocusOnHtml) setIsPointerOnHtml(true);
}}
onPointerLeave={() => {
if (isFocusOnHtml) setIsPointerOnHtml(false);
}}
>
<iframe
src="https://niltonsf.dev/static"
title="myStaticWebsite"
style={{ width: isMobile ? 1200 : 1500 }}
/>
</div>
</Html>这里是@media：
@media screen and (max-width: 708px) {
#root {
background-color: red;
}
}正如您在我的3d视图中所看到的，背景正在应用中，因为我在移动设备上看到了这一点，但我不希望媒体应用于此路线，因为iframe.
1条答案
按热度按时间polhcujo1#
据我所知，你同时控制着iframe站点和普通站点。为什么不在iframe中加载一个像
/?site=mobile或/?site=desktop这样的查询，或者适合你的东西，你可以将该类应用到iframe中的body标记中。你需要根据该类设置css中的参数，这样你就可以根据该类设置大小。下面的普通JS代码获取查询字符串，并将add应用于body标记。
额外的好处：我不会直接给类给予查询参数，这意味着我会做一些检查并设置一些默认值，但这是它的要点。