L'iPad non attiva l'evento di ridimensionamento passando da verticale a orizzontale?

Question

Qualcuno ha notato questo comportamento? Sto provando a scrivere uno script che si innescherà dopo un ridimensionamento. Funziona bene con i normali browser, funziona bene su iPhone, ma su iPad, si innescherà solo passando da una vista orizzontale a quella verticale, non viceversa.

Ecco il codice:

$(window).resize(function() { 

    var agent=navigator.userAgent.toLowerCase(); 
    var is_iphone = ((agent.indexOf('iphone') != -1)); 
    var is_ipad = ((agent.indexOf('ipad') != -1)); 

    if(is_iphone || is_ipad){ 
     location.reload(true); 
    } else {  
     /* Do stuff. */ 
    }; 
}); 

Answer 1

Se ho capito bene, vuoi fare qualcosa quando l'utente inclina l'iPad. Qui si va:

window.onorientationchange = function(){ 

    var orientation = window.orientation; 

    // Look at the value of window.orientation: 

    if (orientation === 0){ 

     // iPad is in Portrait mode. 

    } 

    else if (orientation === 90){ 

     // iPad is in Landscape mode. The screen is turned to the left. 

    } 


    else if (orientation === -90){ 

     // iPad is in Landscape mode. The screen is turned to the right. 

    } 

} 

Answer 2

The only thing I could find from apple:

Safari su iPad e Safari su iPhone non hanno finestre ridimensionabili. In Safari su iPhone e iPad, le dimensioni della finestra sono impostate sulla dimensione dello schermo (meno i controlli dell'interfaccia utente di Safari) e non possono essere modificate dall'utente. Per spostarsi all'interno di una pagina Web, l'utente cambia il livello di zoom e la posizione della vista mentre tocca due volte o pizzica per ingrandire o ridurre, oppure toccando e trascinando per scorrere la pagina. Quando un utente modifica il livello di zoom e la posizione della finestra, lo fanno all'interno di un'area di contenuto visibile di dimensioni fisse (ovvero, la finestra). Ciò significa che gli elementi della pagina web che hanno la loro posizione "corretta" nella vista possono finire fuori dall'area di contenuto visualizzabile, fuori dallo schermo.

Capisco la parte "opere su iPhone" ... ma forse non lo è più? Questo potrebbe essere un cambiamento in OS/mobile Safari da quando è stata rilasciata l'ultima versione del sistema operativo pubblico per iPhone (la documentazione di cui sopra è da marzo 2010).

Ho intenzione di ricodificare questa domanda aggiungendo iPhone, forse uno dei ragazzi con la versione 4.0 del sistema operativo dello sviluppatore può testarlo? Se è stato rimosso, questo dovrebbe essere un bug archiviato/riparato prima che vada in diretta ... Non sono sicuro di come siano le procedure su questo con Apple.

Answer 3

Penso che ciò che si vuole sarebbe quella di utilizzare il iPad Orientation CSS, che assomiglia a questo:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" /> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" /> 

Inoltre, i orientationchange evento si attiva quando l'orientamento è cambiato, secondo iPad web development tips.

Insieme, questo dovrebbe darvi strumenti sufficienti per gestire il cambiamento.

Answer 4

Controlla la tua versione di iOS.

L'evento "orientationChange" non funziona in iOS 3. *, ma lo fa in 4. *

Answer 5

1. fare un bel controllo se la vostra piattaforma è iPad,

2. gestire l'evento specifico iOS orientationChange catturando window.onorientationchange

   if(navigator.platform == 'iPad') { 
       window.onorientationchange = function() { 
        // handle orientationchange event 
        // (here you can take advantage of the orientation property 
        //  - see the good answer above by Vincent) 
       }  
   } 
   

Answer 6

Volete questa correzione per il bug orientamento su iPhone un nd ipad. leggere su di esso qui: http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

github versione più recente qui: https://gist.github.com/901295 utilizzare la seconda versione della pagina.

Answer 7

Questo include tutti gli orientamenti.

Qui ci sono due opzioni:

window.onorientationchange = function() { 

    var orientation = window.orientation; 

    // Look at the value of window.orientation: 

    if (orientation === 0) { 
    // iPad is in Portrait mode. 

    } else if (orientation === 90) { 
    // iPad is in Landscape mode. The screen is turned to the left. 

    } else if (orientation === -90) { 
    // iPad is in Landscape mode. The screen is turned to the right. 

    } else if (orientation === 180) { 
    // Upside down portrait. 

    } 
}  

o

// Checks to see if the platform is strictly equal to iPad: 
    if(navigator.platform === 'iPad') { 
      window.onorientationchange = function() { 

      var orientation = window.orientation; 

      // Look at the value of window.orientation: 

      if (orientation === 0) { 
      // iPad is in Portrait mode. 

      } else if (orientation === 90) { 
      // iPad is in Landscape mode. The screen is turned to the left. 

      } else if (orientation === -90) { 
      // iPad is in Landscape mode. The screen is turned to the right. 

      } else if (orientation === 180) { 
      // Upside down portrait. 

      } 
      }  
     }