Estoy tratando de descubrir cómo cambiar una página web incrustada cuando el usuario gira su teléfono del modo vertical al modo horizontal, básicamente para cargar una vista que se adapta mejor al formato de pantalla más amplio. ¿Es posible hacerlo sin tener que llamar a una nueva página desde el servidor, es decir, desde dentro de CSS/Javascript?¿Puedo activar un evento CSS en un safari móvil al cambiar la orientación del iphone?
Gracias!
Puede usar la propiedad window.orientation. Su valor es el grado en que se usa el modo de vista actual. He aquí un breve ejemplo:
function updateOrientation()
{
var orientation=window.orientation;
switch(orientation)
{
case 0:
break;
case 90:
break;
case -90:
break;
}
}
Se puede utilizar esta función en este evento:
window.onorientationchange=updateOrientation;
Espero que ayude!
Safari Mobile admite orientation events.
El navegador móvil Safari cuenta con el apoyo para el evento orientationchange, así como la propiedad orientation en la ventana, por lo que se puede hacer algo como:
window.onorientationchange = function() {
switch(window.orientation) {
case 0: // Portrait
case 180: // Upside-down Portrait
// Javascript to setup Portrait view
break;
case -90: // Landscape: turned 90 degrees counter-clockwise
case 90: // Landscape: turned 90 degrees clockwise
// Javascript to steup Landscape view
break;
}
}
yo añadiría el revés ya que la interfaz humana iPad las directrices dicen que debe admitir todas las orientaciones, por lo que esperaría que Safari en el iPad (y posiblemente futuras versiones de iPhone) lo admitan.
<body onorientationchange="updateOrientation();">
Desde: Safari Web Content Guide
Mejor no establezca la propiedad onorientationchange directamente. En su lugar utilice la siguiente:
window.addEventListener('orientationchange', function (evt) {
switch(window.orientation) {
case 0: // portrait
case 180: // portrait
case 90: // landscape
case -90: // landscape
}
}, false);
No puedo creer que nadie hablaba de la sentencia css:
@media screen and (max-width: 320px) // Portait Mode
{
/* CSS RULINGS */
p{}
body{}
}
@media screen and (min-width: 321px) // Landscape Mode
{
/* CSS RULINGS */
p{}
body{}
}
Esto es definitivamente más correcta que la respuesta aceptada. –