调整iframe内容以适合不同尺寸的屏幕

发布于 2025-02-09 15:15:47 字数 1519 浏览 1 评论 0原文

我一直在这里和其他地方搜索答案，但是我只找到了部分答案。

我在我的网站上的iframe中放了一个新闻。我可以在PC/笔记本电脑上看起来很棒，也可以在手机上看起来很完美。永远不会同时。当手机上良好时，iframe在我的笔记本电脑上大约是1厘米。当我的笔记本电脑上看起来不错时，iframe和文章在手机上的屏幕外面。

在搜索一些时，这一点代码使其在我的笔记本电脑上看起来不错。

感觉我需要指定两个不同的宽度，但我不知道如何。另外，如果我使用宽度：100％；笔记本电脑和电话上的实际宽度约为1厘米。我试图将宽度与最小宽度相结合：100％：300和最大宽度：1024，但我也无法正常工作。

                                  <div
                                   style="
                                      overflow: hidden;
                                      display:inline-block;">
                                   <iframe
                                      src='https://nyheter24.se/nyheter/ekonomi/1037042-kryptosparare-kan-bli-blast-20-ganger-om-dagen#overlay-wrapper-outer-0'
                                      scrolling="auto"
                                      frameBorder="0"
                                      style="
                                          width: 1024px;
                                          height: 800px;
                                          margin-top: -180px;
                                          margin-left: -200px;
                                        -webkit-transform:scale(0.7);
                                        -moz-transform:scale(0.7);
                                        -o-transform:scale(0.7);
                                        -ms-transform:scale(0.7);"
                                   ></iframe>
                                 </div>

原文

I've been searching around both here and at other places for answers, but I have only found part of the answer.

I'm putting a newsarticle in an iframe on my website. I can either get it to look awesome on PC/laptop or perfect on my phone. Never both. When it's good on the phone, the iframe is like 1 cm wide on my laptop. When it looks good on my laptop the iframe and article go outside the screen on my phone.

When searching around some, this bit of code makes it look good at my laptop.

It feels like I need to specify two different width, but I have no idea how. Also, if I use width: 100%; the actual width on both laptop and phone is about 1 cm. I've tried to combine width:100% with min-width:300 and max-width:1024 but I cant get that to work either.

                                  <div
                                   style="
                                      overflow: hidden;
                                      display:inline-block;">
                                   <iframe
                                      src='https://nyheter24.se/nyheter/ekonomi/1037042-kryptosparare-kan-bli-blast-20-ganger-om-dagen#overlay-wrapper-outer-0'
                                      scrolling="auto"
                                      frameBorder="0"
                                      style="
                                          width: 1024px;
                                          height: 800px;
                                          margin-top: -180px;
                                          margin-left: -200px;
                                        -webkit-transform:scale(0.7);
                                        -moz-transform:scale(0.7);
                                        -o-transform:scale(0.7);
                                        -ms-transform:scale(0.7);"
                                   ></iframe>
                                 </div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

还给你自由 2025-02-16 15:15:48

您的问题并不是真正可重复的，但它与您使用固定单位（PX）的iframe本身以及其Margin和错误计算有关。

由于许多手机的输出像素尺寸在360x720左右，无论其硬件像素尺寸（通常更大），因此您使用1024x800px的w/h值和-180px和-200px的负值遇到麻烦。

由于您没有为您进行的计算发布公式，因此我只能猜测您要实现的目标。正如我在评论中提到的那样，缩放元素仍将占据原始的未量化尺寸。当需要常规元素对齐时，需要使用负Margin s进行相对于使用的比例因子进行调整大小。

常规方程： y = -1 *（尺寸 - 比例 * size）/2

该方程必须用于所有四个Margin属性，替换elements width和高度 size （请参阅摘要）。

我创建了一个响应性的尺寸和缩放演示，以用作您的框架。当代码对代码进行了大量评论时，这里只摘要摘要：

使用完整的浏览器视口对演示
使用Flexbox布局包装器轻松将＆lt; iframe＆gt;在ViewPort
引入CSS Casture 可以轻松微调和缩放尺寸和缩放尺寸和
中使用上面提到的方程式来缩小＆lt; iframe＆gt;

我将其保留给您，缩放尺寸创建负面rain s如何和位于文档中放置缩放＆lt; iframe＆gt; ...

smippet ，转到'完整页面'并调整浏览器大小以查看一切都发生。移动尺寸仅在DevTools设备仿真中测试！

/********************************/
/* some convenient global rules */
/********************************/
/* Check at MDN 'box-sizing' for 'why'. There are many other explanations online. */
 *, ::before, ::after { -webkit-box-sizing: border-box; box-sizing: border-box }

html        { scroll-behavior: smooth }
body        { min-height: 100vh; margin: 0 } /* forcing body to go full screen */
html, body  { width: 100%; max-width: 100% }

/* use in <body> for debugging */
[outlines^="1"] * { outline: 1px dashed }

/*******************/
/* SO72693780 DEMO */
/*******************/
.wrapper {
    /* Flexbox Layout for easy positioning and sizing child elements */
    display: flex;

    justify-content: center; align-content: center; align-items: center;
    /* centers all child elements in parent */

    width: 100%;   /* stretch to full screen */
    height: 100vh;

    overflow: hidden; /* clips content and hides scrollbars */
}

iframe {
    border: none; /* as per OP original */

    /*
        W/H will have to be made variable for mobile/desktop use:
        - either using vw/vh relative to browser viewport
        - or a percentage relative to parent container

        Using viewport units for the demo 
        and custom properties for easy manipulation/testing. 
    */
    --width : 100vw; /* only change these values */
    --height: 100vh;
    --scale : 0.7;

    width : var(--width);  /* was 1024px */
    height: var(--height); /* was  800px */
    /* NOTE to me: original aspect ratio is 1024:800 => 1.28:1 */

    /* No vendor prefixes required */
    transform: scale(var(--scale)); /* scaled to % of original frame size */
    /*
        While scaled down, the element still occupies the original
        unscaled space, which can be corrected by using a negative margin
        relative to the elements current W/H.

        equations: yh = -1 * (height - scale * height) / 2
                   yw = -1 * (width  - scale * width ) / 2

        yh and yw because of width/height dependency 
        /2 because T/B and L/R margins
        -1 to create negative margin values
    */
    margin: calc(-1 * (var(--height) - var(--scale) * var(--height)) / 2)
            calc(-1 * (var(--width)  - var(--scale) * var(--width))  / 2);
    /*
        REMEMBER: other size properties like padding and border will be scaled too.
                  If you don't want that, compensate the scaling down 
                  by multiplying the size values of those properties with 1/scale
    */
}

<body outlines="0">
<div class="wrapper">
    <!-- inline 'scrolling' attribute is obsolete, removed from code -->
    <iframe
        src="https://nyheter24.se/nyheter/ekonomi/1037042-kryptosparare-kan-bli-blast-20-ganger-om-dagen#overlay-wrapper-outer-0">
    </iframe>
</div>
</body>

Your problem is not really reproducible, but it is related to your using fixed units (px) for both the iframe itself and its margin and faulty calculations.

As many mobiles have output pixel sizes varying around 360x720, regardless of their hardware pixel sizes (often much larger), you will get in trouble using W/H values of 1024x800px and negative margins of -180px and -200px.

As you did not post the formula for the calculations you made, I can only guess what you are aiming for to achieve. As I mentioned in the comments, the scaled element will still occupy the original unscaled size. When regular element alignment is needed, that space needs to be resized relative to the used scale factor using negative margins.

General equation: y = -1 * (size - scale * size) / 2

This equation has to be used for all four margin properties, substituting the elements width and height for size (see snippet).

I created a responsively sizing and scaling demo to use as a framework for you to build upon. As the code is heavily commented, here only a summary of what it does:

Use the full browser viewport for the demo
Use a Flexbox layout wrapper to easily center the <iframe> in the viewport
Introduced CSS custom properties to easily fine-tune sizing and scaling
Create negative margins using the equation mentioned above to shrink the total size occupied by the <iframe>

I leave it up to you how and where you place the scaled <iframe> in your document...

snippet, go 'Full page' and resize your browser to see it all happen. Mobile size only tested in DevTools device emulation!

/********************************/
/* some convenient global rules */
/********************************/
/* Check at MDN 'box-sizing' for 'why'. There are many other explanations online. */
 *, ::before, ::after { -webkit-box-sizing: border-box; box-sizing: border-box }

html        { scroll-behavior: smooth }
body        { min-height: 100vh; margin: 0 } /* forcing body to go full screen */
html, body  { width: 100%; max-width: 100% }

/* use in <body> for debugging */
[outlines^="1"] * { outline: 1px dashed }

/*******************/
/* SO72693780 DEMO */
/*******************/
.wrapper {
    /* Flexbox Layout for easy positioning and sizing child elements */
    display: flex;

    justify-content: center; align-content: center; align-items: center;
    /* centers all child elements in parent */

    width: 100%;   /* stretch to full screen */
    height: 100vh;

    overflow: hidden; /* clips content and hides scrollbars */
}

iframe {
    border: none; /* as per OP original */

    /*
        W/H will have to be made variable for mobile/desktop use:
        - either using vw/vh relative to browser viewport
        - or a percentage relative to parent container

        Using viewport units for the demo 
        and custom properties for easy manipulation/testing. 
    */
    --width : 100vw; /* only change these values */
    --height: 100vh;
    --scale : 0.7;

    width : var(--width);  /* was 1024px */
    height: var(--height); /* was  800px */
    /* NOTE to me: original aspect ratio is 1024:800 => 1.28:1 */

    /* No vendor prefixes required */
    transform: scale(var(--scale)); /* scaled to % of original frame size */
    /*
        While scaled down, the element still occupies the original
        unscaled space, which can be corrected by using a negative margin
        relative to the elements current W/H.

        equations: yh = -1 * (height - scale * height) / 2
                   yw = -1 * (width  - scale * width ) / 2

        yh and yw because of width/height dependency 
        /2 because T/B and L/R margins
        -1 to create negative margin values
    */
    margin: calc(-1 * (var(--height) - var(--scale) * var(--height)) / 2)
            calc(-1 * (var(--width)  - var(--scale) * var(--width))  / 2);
    /*
        REMEMBER: other size properties like padding and border will be scaled too.
                  If you don't want that, compensate the scaling down 
                  by multiplying the size values of those properties with 1/scale
    */
}

<body outlines="0">
<div class="wrapper">
    <!-- inline 'scrolling' attribute is obsolete, removed from code -->
    <iframe
        src="https://nyheter24.se/nyheter/ekonomi/1037042-kryptosparare-kan-bli-blast-20-ganger-om-dagen#overlay-wrapper-outer-0">
    </iframe>
</div>
</body>

回复收藏 0 原文

~没有更多了~