调整iframe内容的大小以适应不同尺寸的屏幕

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

我把一篇新闻文章放在我网站的框架里。我可以让它在PC/笔记本电脑上看起来很棒，或者在手机上看起来完美。从来没有。当它在手机上运行良好时，它的框架在我的笔记本电脑上只有1厘米宽。当它在我的笔记本电脑上看起来很好时，iframe和文章就会在我的手机屏幕上显示出来。

在我的笔记本电脑上搜索时，这段代码看起来很不错。

感觉我需要指定两个不同的宽度，但我不知道如何。同样，如果我使用width: 100%;笔记本电脑和手机的实际宽度都在1厘米左右。我试过将width:100%与min-width:300和max-width: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>

您的问题不是真正可重复的，但它与您对iframe本身及其margin使用固定单位(px)和错误的计算有关。

由于许多手机的输出像素大小在360 × 720左右变化，而不管它们的硬件像素大小(通常更大)，使用1024x800px的W/H值和-180px和-200px的负边距会遇到麻烦。

由于你没有公布你所做的计算公式，我只能猜测你的目标是什么。正如我在评论中提到的，缩放后的元素仍然会占用原始的未缩放的大小。当需要常规元素对齐时，该空间需要根据使用的比例因子使用负margins来调整大小。

一般方程:y = -1 * (size - scale * size)/2

这个方程必须用于所有四个margin属性，用元素width和height代替size(参见代码片段)。

我创建了一个响应式大小和缩放演示，作为您构建的框架。由于代码中有大量注释，这里仅对其功能进行总结:

使用完整的浏览器视窗进行演示
使用Flexbox布局包装器可以轻松地将<iframe>居中
引入CSS自定义属性，轻松微调大小和缩放
使用上述公式创建负margins以缩小<iframe>

我把它留给你如何和你在哪里放置缩放的<iframe>在你的文档…

，点击"整页"，调整浏览器大小，就可以看到这一切了。移动大小只测试在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>

相关内容

最新更新

热门标签：