TaeV TaeV - 5 months ago 34
Javascript Question

iframe responsive, width working incorrect

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

<html>
<head></head>

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




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

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.