How to show web page in iframe zoomed out?

Viewed 123

I have iframe of about 25% of screen width and I show web page in it. The problem is that web page detects it is showing only on 25% of screen and rearranges elements in the way I do not like.

I would prefer to see whole page scaled down to 25% without rearranging - it means that script on the page should detect it shows on canvas 1920px wide and then the page is scaled down to 25%. Is that possible without affecting other elements that are outside of the web page iframe?

1 Answers

You can make the iframe as big as the website should be and then scale it down with transform:

body {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.myIframe {
  width: 100%;
  height: 100%;
  transform:scale(0.5);
}
<html>
<head></head>
<body>
 <iframe class="myIframe" src="https://www.example.com" title="W3Schools Free Online Web Tutorials"></iframe>
</body>
</html>

Related