- reimposta la finestra sul cambiamento di orientamento

Question

Ho una pagina mobile larga 590 px. Così ho impostato la finestra come questa:

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

Quando ho visitare la pagina sia in modalità ritratto o panorama - tutto sembra a posto. La pagina riempie esattamente la larghezza. Ma quando cambio orientamento, la finestra non cambia. Quando passo da verticale a orizzontale, il viewport è più largo del 590px e viceversa.

Testata solo su Galaxy S2

Answer 1

Usa dispositivo larghezza:

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

Questo gestisce variazioni di orientamento.

Answer 2

Sono quasi certo che è possibile rilevare il cambiamento dell'orientamento nel Galaxy usando JS. Prova lo snippet sotto.

---

Da un post correlati: 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

Questo suona esattamente come il problema che stavo avendo. Non sono riuscito a trovare una risposta consolidata, quindi ho dovuto crearne uno insieme.

In primo luogo, qualsiasi CSS che appariva diverso su verticale e orizzontale doveva essere inserito nel proprio tag @media. È importante distribuire l'intera classe in ciascun selettore @media, non solo i bit che sono diversi. I CSS comuni a entrambe le visualizzazioni possono essere visualizzati in alto. La larghezza del mio dispositivo era pari a 580, quindi ho impostato il limite a 600: è possibile impostarlo su ciò che ritieni sia giusto per te.

// 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 
} 

Avanti erano le impostazioni di visualizzazione. Ho inserito questo codice come standard in ciascuna delle mie teste di pagina (la dimensione è la dimensione del mio cellulare). Ha bisogno del meta lì in modo che il javascript possa arrivarci più tardi.

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

alla fine ho dovuto usare un po 'di Javascript per riscrivere le impostazioni del riquadro di visualizzazione quando la pagina ha rilevato una rotazione del telefono (grazie 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); 
    } 

Dopo ore di provare cose fuori, questo è quello che ha funzionato per me. Per qualche ragione sul mio telefono, la scala iniziale = 1 ha rovinato tutto ma 0,25 ha funzionato ?! Spero che funzioni per te o almeno offra un buon punto di partenza.

Answer 4

Aveva lo stesso problema, questa era la mia soluzione.

Ricarica la pagina dopo il cambio di orientamento, quindi imposta le variabili di visualizzazione in base al nuovo orientamento.

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 funzione Matchmedia funziona davvero bene su Android nel mio test:

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

Ripristinare la finestra dopo il cambio di orientamento.Questo js potrebbe funzionare, a patto di avere

<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

Questo è ciò che ha funzionato per me (testato sia in iOS Safari e Chrome).

Volevo forzare viewport a 400px in modalità verticale ea 600px in modalità orizzontale.

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(); 
}); 

Spero che sia d'aiuto!