TaeV TaeV - 1 year ago 102
Javascript Question

iframe responsive, width working incorrect

I've testing responsive in iframe, my code look like this.


<iframe src="http://revzilla.com" height="1600px" width="100%" frameborder="0" style="padding: 0; maring: 0; border: 0"></iframe>

But it does not render like when i open the url directly.

See images.

First image: Use iframe.

Open with iframe

Second image: Open directly.

Open directly

Question 1: How can I modify CSS for iframe to make it render like the same as when i open the url directly.

Question 2: If i can accesses content in the iframe (html document on iframe). How can I modify CSS on that document without modify iframe.

Answer Source

Have you included a meta viewport tag on the source of the iframe and the file itself?

<meta name="viewport" content="width=device-width, initial-scale=1">

Remember that the literal pixel width depends on the user's device pixel ratio, so if you are viewing on retina devices where the device pixel ratio is above 1 then the amount of pixels will scale with it.