Estoy atascado en este tema en mi proyecto. Estamos desarrollando un sitio web que se verá en 2 pantallas diferentes, una es un dispositivo horizontal (32 pulgadas de altura y 1080 1920px) y el otro es un dispositivo vertical (55 pulgadas de altura y 1920 1080). He usado bootstrap para crear el diseño receptivo. Tengo que crear una funcionalidad de botón de altura reducida en el dispositivo vertical que básicamente cambiará el aspecto del sitio web de vertical a horizontal, reducirá la escala del sitio web y lo enviará al fondo, para que pueda ser accesible para personas en silla de ruedas y de menor altura.

Estos son los enfoques que he probado hasta ahora:

Enfoque 1:

Implementé esta funcionalidad agregando metaetiquetas y agregando una imagen en la parte superior cuando se hace clic en esto.

<meta name="viewport" content="width=1920">

Problema: esto se hizo asumiendo que la pantalla vertical será un dispositivo móvil, por lo que la ventana gráfica puede funcionar. Para mi sorpresa, no es un dispositivo Android, sino que tiene el sistema operativo Windows 10 y es un dispositivo de escritorio en modo vertical, lo que hace que mi enfoque sea discutible ya que el navegador de escritorio no es compatible con la ventana gráfica. He intentado varias cosas, pero no puedo cambiar de vertical a horizontal, ya que para la horizontal, el ancho del documento es de 1920 px, por lo que Bootstrap puede hacer la magia. Probé la escala inicial en la ventana gráfica, pero eso tampoco funciona.

Enfoque 2: mi segundo enfoque es usar un iframe del sitio web que tenga un ancho de 1920 px en el clic de altura reducida que se mostrará. Aquí está el diagrama de flujo de código de este enfoque:

 <div> //visible only when reduced height button is clicked <img> //image appearing on top <iframe src="url"> </div> <div> //entire website's code hidden when reduced height button is clicked .... </div>

Problema: esto funciona bien hasta cierto punto, pero en este enfoque se rompen varias cosas de terceros, que están en aproximadamente 1/3 de todas las páginas, esto probablemente se puede corregir, pero es una tarea gigantesca.

Restricciones: no puedo cambiar el sistema operativo del quiosco de retratos, no puedo cambiar el navegador en el que se ve el sitio (Chrome) ya que algunos scripts por lotes están escritos para operar solo en pantalla completa y deshabilitar cualquier otro sitio para abrir en el nivel n/w que es específico del navegador por alguna razón. Tampoco puedo instalar Chrome Android en ningún emulador de Android y ejecutar el sitio en eso, ya que eso afectará drásticamente la experiencia del usuario.

Por favor proporcione cualquier idea y corríjame si estoy haciendo algo mal, toda ayuda es muy apreciada. Gracias.