Escalar contenido de iframe dentro de página

[el_cesar]

Sigo con mi cuento de la motico que no he podido acomodar, ahora me resulta algo muy paradojico:

para hacer la prueba de carga, creé un archivo mobile.php que es este http://www.ecobicis-colombia.com/mobile.php

y cuyo código es:

Código PHP:

<iframe src='http://www.ecobicis-colombia.com/html5/happy.html' width='500' height='450' align='center' frameborder='0' scrolling='no'></iframe>
<?php require_once ('Mobile_Detect.php');
 
/*
$detect = new Mobile_Detect(); 
if ($detect->isMobile()) {
// Detecta si es un móvil
}
if ($detect->isTablet()) {
echo "<iframe id='iframe' style='-moz-transform: scale(0.99); -moz-transform-origin: 0 0; -o-transform: scale(0.99); -o-transform-origin: 0 0; -webkit-transform: scale(0.99); -webkit-transform-origin: 0 0;' src='http://www.ecobicis-colombia.com/html5/happy.html' height='450' width='500' frameborder='0' scrolling='no'></iframe>";
 
}
if ($detect->isAndroidOS()) {
echo "<iframe id='iframe' style='-moz-transform: scale(0.99); -moz-transform-origin: 0 0; -o-transform: scale(0.99); -o-transform-origin: 0 0; -webkit-transform: scale(0.99); -webkit-transform-origin: 0 0;' src='http://www.ecobicis-colombia.com/html5/happy.html' height='450' width='500' frameborder='0' scrolling='no'></iframe>";
 
}
if ($detect->isiOS()){
echo "<iframe id='iframe' style='-moz-transform: scale(0.99); -moz-transform-origin: 0 0; -o-transform: scale(0.99); -o-transform-origin: 0 0; -webkit-transform: scale(0.99); -webkit-transform-origin: 0 0;' src='http://www.ecobicis-colombia.com/html5/happy.html' height='450' width='500' frameborder='0' scrolling='no'></iframe>";
 
}
else {
    echo "<iframe src='http://www.ecobicis-colombia.com/html5/happy.html' width='500' height='450' align='center' frameborder='0' scrolling='no'></iframe>
";
}
*/
?>
 

resulta que si abro ese archivo desde mi cel LG Optimus L5, se carga redimensionado es decir, conserva una proporción relativamente agradable a la vista (o sea, se puede ver)

pero cuando inserto ese mismo iframe

<iframe src='http://www.ecobicis-colombia.com/html5/happy.html' width='500' height='450' align='center' frameborder='0' scrolling='no'></iframe>

en una página de wordpress y la argo desde el celu, no lo redimensiona-. ejemplo http://www.ecobicis-colombia.com/happy-bici/



En pocas palabras lo que yo necesito es que cuando un usuario cargue el sitio desde el celu el html5 quede redimensionado

[ismaelfre]

Buenas tengo el mismo problema que tu pero no en movil sino en pc tengo una web con 3 iframes y quiero escalar uno para que se vea la totalidad de la web en el iframe, sin que este se vea alterado.

En tu caso segun estoy viendo solo lo haces para navegadores Opera, pero para mozilla se usa:
-moz-transform:scale(0.99);
-moz-transform-origin: 0 0;

[el_cesar]

yo le di vueltas por todo lado y no logré hacerloo, la única solución que encontré fue hacer nuevamente la pieza enn html5, para esto utilicé Adobe Edge Animate y ahora me funciona perfecto.