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>
