javascript - sencillas - ejemplos de paginas web en html5 y css3 codigo

¿Cuál es el mejor método para volver a presentar una página web sobre el cambio de orientación?

Question

Tengo un diseño fluido de CSS que está funcionando mal en un iphone cuando cambio la orientación. (Se ve bien cuando se actualiza).

Estoy usando el código a continuación para actualizar la página sobre cambio de orientación, que funciona bien, simplemente se siente un poco mal hacerlo. ¿Hay alguna forma de lograr esto sin tener que volver a cargar toda la página? Es un sitio móvil, realmente no quiero obligar al usuario a cargar la página dos veces.

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    window.location.reload()
}, false);   

Editar:

Los dos problemas principales cuando se prueba en un iphone son:

Tengo un ancho de 100%, con una imagen de fondo alineada a la derecha. Cuando cambio la orientación de vertical a horizontal, el ancho del cuerpo sigue siendo el mismo que en el modo vertical y viceversa. Es más un problema de paisaje a retrato ya que la página es demasiado ancha y parece representar las imágenes dos veces.

Answer 1

Actualización 2015

Todas las otras respuestas son incorrectas o desactualizadas. Esto es lo que funciona:

  window.addEventListener(''orientationchange'', function () {
    var originalBodyStyle = getComputedStyle(document.body).getPropertyValue(''display'');
    document.body.style.display=''none'';
    setTimeout(function () {
      document.body.style.display = originalBodyStyle;
    }, 10);
  });

El código escucha el evento de cambio de orientación y fuerza un reflujo del elemento del body ocultándolo y mostrándolo 10 milisegundos después. No depende de ninguna etiqueta <meta> o consulta de medios.

Otras respuestas sugerían utilizar consultas de medios, pero ya las usa, ya que dijo "Se ve bien cuando se actualiza".

Algunas other respuestas sugieren usar location.reload() . Esto es muy ineficiente, ya que volverá a cargar toda la página, incluidas las imágenes, etc. Especialmente en dispositivos móviles, no desea hacer eso.

Sin embargo, otras respuestas sugirieron agregar <meta name="viewport" content="width=device-width, initial-scale=1.0"> o variaciones de los mismos. A partir de Safari 7, esto ya no funciona. Aquí hay una demo . Para asegurarse de que ve cómo no funciona, comience con el iPad en modo horizontal, cargue la página y luego gírela. Observe que la página no se expande a su altura completa, a pesar de usar flexbox en todo momento.

Compare eso con esta página , donde usamos la técnica de ocultar / mostrar el cuerpo en producción.

Answer 2

En mi experiencia, la mejor manera es tenerlo así

<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width /">
<meta name="apple-mobile-web-app-capable" content="yes"/>

Hacerlo como @BenSwayne en mi experiencia no vuelve a la escala inicial cuando cambias la orientación. No sé por qué es eso

Answer 3

Otra opción podría ser añadir y eliminar clases CSS de los elementos html (div, var, span, etc.). De esta forma, puede modificar solo los elementos que le causan problemas y también puede ajustar el contenido en navegadores que no sean móviles si el usuario cambia el tamaño de la ventana del navegador.

Aquí está el código de Javascript / JQuery que necesitará:

// Code to run when page has finished loading
$(function() {
    // Add CSS-class to body depending on device platform using user agent string
    // You can add more validations here and/or separate Android from iPhone or add more customized classes like "landscape_iPad", "landscape_iPhone", etc.
   // You can also validate browser types and add classes like "background_IE" or "background_Chrome", etc
    if ((navigator.userAgent.indexOf("iPad") != -1)) {
        $("#background").addClass("landscape");
    } else if ((navigator.userAgent.indexOf("Android") != -1) || (navigator.userAgent.indexOf("iPhone") != -1) || 
    (navigator.userAgent.indexOf("iPhone") != -1)) {
        $("body").addClass("iPhone");
    }

    // Get the initial orientation on iOS devices
    if (!isNaN(window.orientation)) {
        var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
        // Index php
        $("#background").addClass(orientation);
    } else {
        // Choose layout depending on viewport/window width
        var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
        // Index php
        $("#background").addClass(orientation);
    }

    // Bind orientationChange (or viewport/window size changes)
    if (window.onorientationchange != undefined) {
        window.onorientationchange = function() {
            var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
            // Index php
            $("#background").removeClass("portrait landscape").addClass(orientation);
        }
    } else {
        // Use landscape styling if it''s wider than 980 pixels. 
        // This is for non mobile browsers, this way if the user resize the browser window, content will adjust too.
        $(window).bind(''resize'', function(){
            var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
            // Index php
            $("#background").removeClass("portrait landscape").addClass(orientation);
        });
    }
});

Y aquí está la clase de CSS para el elemento de muestra "fondo":

#background.portrait {
    position:absolute;
    top:0px;
    left:0px;
    width:768px;
    height:946px;
    z-index:0;
    background:url(background.png) top center no-repeat;
}
#background.landscape {
    position:absolute;
    top:10px;
    left:20px;
    width:1024px;
    height:724px;
    z-index:0;
    background:url(background_landscape.png) top center no-repeat;
}

De esta forma puede personalizar el comportamiento del paisaje y el retrato y puede agregar más clases como: "landscape_iPhone", "portrait_Android" o lo que sea que necesite para controlar la representación de la página para cada dispositivo específico.

Además, no necesita volver a cargar la página, sino que la ajustará sobre la marcha.

Espero que lo ayude a usted o a alguien más =), esto me ha permitido crear sitios web personalizados para cada tamaño de pantalla, marca móvil o incluso tipo de navegador con el mismo HTML pero diferentes clases de CSS.

Answer 4

Pruebe algo como esto:

$(function(){

    changeOrientation(window.orientation == 0 ? "portrait" : "landscape");

    $(''body'').bind(''orientationchange'',function(event){
        changeOrientation(event.orientation)
    });

    function changeOrientation(ori){
        $("#orientation").removeClass(''portrait landscape'');
        $("#orientation").addClass(ori);
    }     
});

Answer 5

Suponiendo que su CSS ya está felizmente representando en las pantallas de varios dispositivos móviles de su tamaño, necesita definir la ventana gráfica en el <head> de su plantilla.

Por ejemplo, esto establece que el ancho de la página sea el ancho de la pantalla del dispositivo y un zoom inicial del 100%. El zoom inicial se aplica al cargar la página, pero no cuando se cambia la orientación.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Al agregar un parámetro de escala máxima = 1.0 a la ventana gráfica, obligará al iPad / iPhone a mantener el nivel de zoom y rediseñar la página en el cambio de orientación. La desventaja de esto es que desactivará el zoom. Sin embargo, la ventaja es que puede hacer ajustes de diseño con consultas de medios para presentar el contenido de manera adecuada para la orientación actual. Puede leer más sobre la ventana gráfica aquí: Elegir un ViewPort

Ahora en consultas de medios. Debe poner consultas de medios en la parte inferior de su archivo CSS y en el orden de ancho más pequeño a ancho más ancho para anchos de pantalla. Por ejemplo, tomado del ejemplo CSS de Html5BoilerPlate :

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}

Así que todos sus estilos normales están por encima de esto y se aplican primero; luego, si la pantalla es 480px o más ancha, se aplica el siguiente bloque de estilos; luego, si la pantalla es de 768px o más, se aplica el último bloque de estilos.

Al combinar el nivel de zoom fijo a 1.0 y las consultas de medios, puede hacer que su sitio cambie de tamaño de forma responsiva al tamaño y la orientación de la pantalla sin javascript. Obviamente, debe asegurarse de que el sitio esté bien diseñado para que los usuarios no necesiten hacer zoom. Si su sitio está optimizado para dispositivos móviles, esto no debería ser un problema.

Tenga en cuenta: otros navegadores móviles que no sean de Safari pueden volver a diseñar la página sin establecer la escala máxima en la ventana gráfica. Pero este comportamiento es inconsistente y la mayoría de los desarrolladores parecen atender a los dispositivos Apple incluso si la implementación es peor que otros dispositivos. Algunos otros dispositivos mantendrían el nivel de zoom y volverían a centrar la ventana gráfica cuando cambie la orientación. Pero todos los dispositivos están bien para arreglar el nivel de zoom a 1.0.

Answer 6

Tuve un problema similar y así es como lo solucioné con jQuery.

En mi caso, los estilos no estaban cambiando correctamente para mi elemento <nav> . Usé una versión modificada del código de kidkaos77 combinada con $.get() para cargar solo una parte determinada de la página:

$(window).bind("resize",function() {
    //on resize reload only nav & replace
    $.get("index.php" +  '' nav'', function(data) {
        $("nav").replaceWith($(data).find("nav"));
    });
});

Con este método no tienes que volver a cargar toda la página, pero deberías especificar exactamente qué elementos se ven afectados por el cambio de orientación, que en tu caso parece que solo necesitas un div.

Answer 7

Usó un método que causa un repintado y un reflujo en un único marco de pila de JavaScript. No está interesado en las respuestas específicas de la ventana gráfica, ya que a menudo es un requisito de accesibilidad para mantener el zoom de pellizco, etc.

$(window).on(''orientationchange'', function() {
    document.body.style.display=''none'';
    document.body.offsetHeight; //cause a reflow
    document.body.style.display=''block''; //cause a repaint
}); 

O equivalente no jquery

window.addEventListener(''orientationchange'', function () {
    document.body.style.display=''none'';
    document.body.offsetHeight; //cause a reflow
    document.body.style.display=''block''; //cause a repaint
});

Answer 8

$(window).bind(''resize'', function() { location.reload(); });

Este código funcionó para mí.