0
294
Viewsiframe Se adapta a la página web completa como en la pantalla Full HD en una ventana pequeña
En la primera imagen, tengo 6 iframes cargados y cada uno tiene su propia página HTML. Todas las páginas en esos iframes responden, por lo que se ajustaron según el tamaño.
Pero quiero que se vea exactamente igual que esas páginas HTML en una pantalla de resolución de 1920x1080 (que se muestra en la imagen 2)
La imagen 2 es la página HTML que se carga en el primer iframe de la segunda fila de la imagen 1
2 answers
Answer question0
Puede establecer la alta resolución en el marco de forma predeterminada y luego hacer zoom y reducirlo al tamaño requerido.
Todo lo que tiene que hacer es calcular el zoom/escala desde el ancho inicial hasta el ancho requerido. Que debería ser el ancho requerido dividido por el ancho inicial.
Fuente del código con ejemplos.
#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; } }0
Probablemente olvidó establecer el tamaño en iframes. El siguiente código me ayudó sin ningún problema:
Código CSS:
div { width: 31%; height: 294px; margin: 0 auto; } iframe { width: -webkit-fill-available; height: -webkit-fill-available; overflow: hidden; border: 0; } 