No modificar el diseño a cambio de pantalla

[lumiloro7]

Hola a todos, quiero una ayuda, resulta que estoy diseñando mi web responsive y todo anda muy bien en las diferentes resoluciones, e inclusive ya había terminado.

me pidieron un nuevo requerimiento y es sobre la rotacion del equipo mobile,
lo que necesito es que el diseño no cambie a la rotacion del celular y quede tal cual.

quiero que el diseño no se modifique y quede en modo vertical.

he buscado y no he encontrado.
espero puedan ayudarme.

asi es como quiero que se vea
https://flic.kr/p/nLWFMk

[PHPeros]

Ya se han creado tecnologías experimentales para el control de la orientación de los dispositivos.

No es seguro que funcione en todos los navegadores, el script es así:

Código Javascript:

var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
 
lockOrientation('portrait');
 

Saludos.

[lumiloro7]

y como lo aplico eso, es un script que tiene que ir asi.

Código HTML:

<script>
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation; 
lockOrientation('portrait');
</script> 

[pzin]

Podrías hacer algo así:

Código CSS:

@media (orientation: landscape) {
  body {
    transform: rotate(-90deg);
  }
}
 

Que lo que haría sería girar noventa grados el elemento body al cambiar la orientación de la pantalla hacia el modo apaisado.

Seguramente debas de incluir los prefijos propietarios.

[lumiloro7]

gracias sus respuestas a ambos. me sirvio de mucho. y eso de aplicar media query para rotarlo, aunq me genero algunos problemas al regresar nuevamente a modo vertical, pero supe adecuarlo. gracias.