sitio móvil: restablecer la vista en el cambio de orientación

Question

Tengo una página móvil que tiene 590 píxeles de ancho. Así que configuré la ventana gráfica así:

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

La primera vez que visito la página, ya sea en vertical u horizontal, se ve bien. La página llena el ancho exactamente. Pero cuando cambio la orientación, la ventana gráfica no cambia. Cuando voy de vertical a horizontal, la ventana gráfica es más ancha que la de 590px, y viceversa.

Probado sólo en Galaxy S2

Answer 1

Usar dispositivo anchura:

<meta name = "viewport" content = "width=device-width"> 

Este maneja los cambios de orientación.

Answer 2

estoy bastante seguro de que sólo se puede recoger el cambio de orientación en el uso de Galaxy JS. Pruebe el fragmento debajo de.

---

Desde un post relacionado: Orientation change in Android using javascript

function orientation_changed() 
{ 
    if (is_portrait()) 
    { 
     //do something 
    } 
    else if (is_landscape()) 
    { 
     // do something else 
    } 
    clearTimeout(window.t); 
    delete window.t; 
} 

window.t = undefined; 
window.onorientationchange = function (event) 
{ 
    window.t = setTimeout('orientation_changed();', 250); 
} 

function is_landscape() 
{ 
    var uagent = navigator.userAgent.toLowerCase(); 
    if (uagent.search('ipad') > -1) 
    { 
     var r = (window.orientation == 90 || window.orientation == -90); 
    } 
    else 
    { 
     var r = (screen.width > screen.height); 
    } 
    return r; 
} 

Answer 3

Esto suena exactamente igual que el problema que tenía. No pude encontrar una respuesta consolidada, así que tuve que juntar una.

primer lugar, cualquier CSS que apareció diferente en vertical y horizontal, tuvo que ser puesto en su propia etiqueta @media. Es importante alinear toda la clase en cada selector de @media, no solo los bits que son diferentes. CSS que es común a ambas vistas puede llegar a la cima. El ancho de mi dispositivo se muestra en 580, por lo que configuro el límite en 600; puede configurarlo para lo que considere adecuado para usted.

// All CSS that is common to both 

@media all and (min-device-width:601px)and (orientation:landscape){ 
    // All CSS for Landscape and Desktop 
} 
@media only screen and (max-device-width:600px)and (orientation:portrait){ 
    // All CSS for Portrait view 
} 

Siguiente era la configuración de la ventana gráfica. Puse este código como estándar en cada uno de los encabezados de mi página (el tamaño es el tamaño de mi retrato de teléfono móvil). Necesita el meta para que el javascript pueda acceder a él más tarde.

<meta name="viewport" id="viewport" content="width=480, initial-scale=0.25, maximum-scale=1.0;" /> 

Finalmente, tuvimos que utilizar un poco de Javascript para volver a escribir la configuración de ventana gráfica cuando la página detecta una rotación del teléfono (gracias a Vinayak.B Original Article)

//Code to display on mobiles 
    //======================================== 

    var swidth = window.screen.width; 
    //These were the values of my website CSS container for portrait and landscape 
    var vpwidth = 480; 
    var vlwidth = 960; 

    updateOrientation(); 

    window.addEventListener('orientationchange', updateOrientation, false); 

    function updateOrientation() { 


     var viewport = document.querySelector("meta[name=viewport]"); 

     switch (window.orientation) { 
     case 0: //portrait 
      //set the viewport attributes to whatever you want! 
      viewport.setAttribute('content', 'width=' + vpwidth + ', initial-scale=0.25, maximum-scale=1.0;') 
      break; 
     case 90: case -90: //landscape 
      //set the viewport attributes to whatever you want! 
      viewport.setAttribute('content', 'width=' + vlwidth + ', initial-scale=0.25, maximum-scale=1.0;') 
      break; 
     default: 
      //set the viewport attributes to whatever you want! 
      viewport.setAttribute('content', 'width=' + vpwidth + ', initial-scale=0.25, maximum-scale=1.0;') 
      break; 
     } 
     //alert(swidth + ' lead to an initial width of ' + vpwidth + ' and a rotate width of ' + vlwidth); 
    } 

después de horas de probar cosas fuera, esto es lo que funcionó para mí. Por alguna razón en mi teléfono, la escala inicial = 1 lo estropeó pero 0.25 funcionó? Espero que funcione para usted o al menos ofrezca un buen punto de partida.

Answer 4

tenían el mismo problema, esto fue mi solución.

cargar la página después de un cambio de orientación, a continuación, establecer variables de ventana gráfica en base a la nueva orientación.

window.onorientationchange = function() { 
    /*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the 
    left, or landscape mode with the screen turned to the right. */ 
    var orientation = window.orientation; 
    switch(orientation) { 
    case 0: 
     var current = $('body').attr('class'); 
     if(current != 'ps-active'){ 
      location.reload(); 
     } 

     break; 

    case 90: 
     var current = $('body').attr('class'); 
     if(current != 'ps-active'){ 
      location.reload(); 
     } 
     break; 

    case -90: 
     var current = $('body').attr('class'); 
     if(current != 'ps-active'){ 
      location.reload(); 
     } 
     break; 
    } 
} 


$(document).ready(function() { 
window.onload = function() { 
    /*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the 
    left, or landscape mode with the screen turned to the right. */ 
    var orientation = window.orientation; 
    switch(orientation) { 
    case 0: 

     viewport = document.querySelector("meta[name=viewport]"); 
     viewport.setAttribute('content', 'width=device-width; initial-scale=0.2; maximum-scale=1.0; user-scalable=yes;'); 
     $('.container').show(); 
     break; 

    case 90: 
     viewport = document.querySelector("meta[name=viewport]"); 
     viewport.setAttribute('content', 'width=device-width; initial-scale=0.4; maximum-scale=1.0; user-scalable=yes;'); 
     $('.container').show(); 
     break; 

    case -90: 
     viewport = document.querySelector("meta[name=viewport]"); 
     viewport.setAttribute('content', 'width=device-width; initial-scale=0.4; maximum-scale=1.0; user-scalable=yes;'); 
     $('.container').show(); 
     break; 
    default: 
     $('.container').show(); 
     break; 
    } 
} 

Answer 5

la función matchMedia funciona muy bien en Android en mis pruebas:

var mql = window.matchMedia("(orientation: landscape)"); 
if (mql.matches) { 
    /* The device is currently in landscape orientation */ 
} 
else { 
    /* The device is currently in portrait orientation */ 
} 

Answer 6

Restablecer la vista después de un cambio de orientación.Este JS podría funcionar, siempre que tenga

<meta name="viewport/> 

var maxWidth = screen.width; 
var viewport = document.getElementsByName('viewport')[0]; 
viewport.setAttribute('content', 'width = ' + maxWidth + ', minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'); 

Answer 7

Esto es lo que funcionó para mí (probado en iOS Safari y Chrome).

Quería forzar viewport a 400px en modo vertical y a 600px en modo horizontal.

var resize = function() { 
    $('body').removeClass('landscape').removeClass('portrait').addClass(orientation).css('width', $(window).width() + 'px'); 
} 

var orientation = null; 

var onOrientationChange = function() { 
    switch(window.orientation) { 
     case -90: 
     case 90: 
      orientation = 'landscape'; 
     break; 
     default: 
      orientation = 'portrait'; 
     break; 
    } 

    if(screen.width < 768) { 
     if(orientation == 'landscape') { 
      var scale = Math.round(screen.height/600 * 10)/10; 
      $('#meta-viewport').attr('content', 'width=600px, initial-scale='+scale+', maximum-scale='+scale+', minimum-scale='+scale+', user-scalable=no'); // landscape mobile 
     } else { 
      var scale = Math.round(screen.width/400 * 10)/10; 
      $('#meta-viewport').attr('content', 'width=400px, initial-scale='+scale+', maximum-scale='+scale+', minimum-scale='+scale+', user-scalable=no'); // portrait mobile 
     } 
    } else if(screen.width >= 768 && screen.width < 1200) { 
     var scale = Math.round(screen.width/960 * 10)/10; 
     $('#meta-viewport').attr('content', 'width=960px, initial-scale='+scale+', maximum-scale='+scale+', minimum-scale='+scale+', user-scalable=no'); 
    } else if(screen.width >= 1200) { 
     $('#meta-viewport').attr('content', 'width=device-width, user-scalable=yes'); 
    } 

    resize(); 
} 

$(document).ready(function() { 
    $(window).resize(resize); 
    $(window).bind('orientationchange', onOrientationChange); 
    onOrientationChange(); 
}); 

Espero que ayude!