0

Is there a way to force a specific resolution in an iframe that contains media queries?

I have an iframe in my page with the size of 300x200px and I'd like it to match the media queries as if it was 1000x500px without changing its size.

Emi
  • 4,597
  • 2
  • 31
  • 34
  • You can probably achieve this with CSS (scale()). See https://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe – Brett Gregson Jul 29 '19 at 15:00
  • @BrettGregson I need that the content of this iframe matches the media queries for a specific resolution, not to change the size of its content. – Emi Jul 29 '19 at 15:04
  • Possible duplicate of [Adjust width and height of iframe to fit with content in it](https://stackoverflow.com/questions/819416/adjust-width-and-height-of-iframe-to-fit-with-content-in-it) – Emanuele Scarabattoli Jul 29 '19 at 15:05
  • I'm not sure if I understand what you're asking. The content of the iframe is going to render according to the size of the iframe. Make the iframe whatever size you need (ie: 1000x500) and use scale to render it at 300x200. – Brett Gregson Jul 29 '19 at 15:06
  • @BrettGregson I'd like that media queries within this iframe matches a specific resolution (without changing the size of the iframe), like colors, padding, etc. – Emi Jul 29 '19 at 15:09
  • So you want the iframe to look like it's 1000x500, but display at 300x200? – Brett Gregson Jul 29 '19 at 15:10
  • Kind of like this: https://jsfiddle.net/cmvy1ohn/ – Brett Gregson Jul 29 '19 at 15:13
  • @BrettGregson I don't want to scale it. I want it to match the media queries for a bigger screen size. – Emi Jul 29 '19 at 15:15
  • But you want it to display smaller? That's scaling – Brett Gregson Jul 29 '19 at 15:16
  • Have a look here: https://jsfiddle.net/Lc2byrau/ and https://jsfiddle.net/fs8vn4ua/. You see what I'm saying? The first iframe is rendering at 1200px, the second at 600px. You could adjust the scale value to ensure they're displaying the same size – Brett Gregson Jul 29 '19 at 15:20
  • @BrettGregson Let's imagine that we have a media query to set the background to red for a desktop display. If we render it at 200x300, you won't see this red background. And I want to see it at any size! (I cannot change this media queries) – Emi Jul 29 '19 at 15:23
  • 1
    Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/197168/discussion-between-brett-gregson-and-emi). – Brett Gregson Jul 29 '19 at 15:25

0 Answers0