css3 - pagina - ¿Podemos hacer que nuestra página web se abra de manera predeterminada en modo horizontal para dispositivos móviles/tabletas utilizando consulta de medios/js/jquery?

responsive web

Question

¿Es posible hacer que mi página web se abra de manera predeterminada en modo horizontal en un dispositivo móvil o una tableta, incluso si la orientación de la pantalla está desactivada utilizando la consulta de medios css3 o jquery?

Answer 1

Usted PODRÍA hacer esto. Si es una buena idea o no, te dejaré decidir (pista: no lo es).

Verifique la orientación del retrato con CSS y gire el cuerpo si es necesario:

@media screen and (orientation:portrait) {
    body {
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
}

rotar el body de esta manera no hará que su ancho y alto se actualicen para adaptarse a su nueva orientación, así que tendremos que corregir esto con JQuery:

function checkOrientation() {
    var winWidth = $(window).width();
    var winHeight = $(window).height();

    if (winHeight > winWidth) {
        $(''body'').width(winHeight).height(winWidth); // swap the width and height of BODY if necessary
    }
}

checkOrientation(); // Check orientation on page load

// Check orientation on page resize (mainly for demo as it''s unlikely a tablet''s window size will change)
var resizeEnd;
$(window).resize(function(){ 
   clearTimeout(resizeEnd);
   resizeEnd = setTimeout(checkOrientation, 100);
});

DEMO (cambiar el tamaño del panel de vista previa)

DESCARGO DE RESPONSABILIDAD: No probado en nada que no sea Chrome.