In first Picture I have 6 iframes being loaded and each having its own HTML page. All pages in those iframes are responsive so they got adjust as per the size.
But I want to make it look like exactly the same those HTML pages would look in 1920x1080 resolution screen (shown in image 2)
Image 2 is the HTML page being loaded in the second row first iframe of Image 1
You can set the high resolution to the frame by default and then zoom and scale it down to the required size.
All you have to do is calculate zoom/scale from starting width to required width. Which should be required width divided by starting width.
Source of the code with examples.
#your-frame {
width: 1920px;
height: 1080px;
}
#your-frame {
zoom: 0.50;
-moz-transform: scale(0.50);
-moz-transform-origin: 0 0;
-o-transform: scale(0.50);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.50);
-webkit-transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#your-frame {
zoom: 1;
}
}
You probably forgot to set the size to iframes. The code below helped me without any problems:
CSS Code:
div {
width: 31%;
height: 294px;
margin: 0 auto;
}
iframe {
width: -webkit-fill-available;
height: -webkit-fill-available;
overflow: hidden;
border: 0;
}
