css 伪造Iframe大小,因此@media查询不适用

wko9yo5t  于 2023-01-06  发布在  其他
关注(0)|答案(1)|浏览(156)
    • 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.

polhcujo

polhcujo1#

据我所知,你同时控制着iframe站点和普通站点。为什么不在iframe中加载一个像/?site=mobile/?site=desktop这样的查询,或者适合你的东西,你可以将该类应用到iframe中的body标记中。你需要根据该类设置css中的参数,这样你就可以根据该类设置大小。
下面的普通JS代码获取查询字符串,并将add应用于body标记。

// /?site=mobile
const params = new URLSearchParams(window.location.search);
let siteClass = params.get('site'); // 'mobile'

bodyTag = document.querySelector("body");
bodyTag.classList.add(siteClass)  // body now has 'mobile' class

额外的好处:我不会直接给类给予查询参数,这意味着我会做一些检查并设置一些默认值,但这是它的要点。

相关问题