si sposta verso sinistra quando si ruota l'iPad da orizzontale a verticale

Question

Sto utilizzando le query multimediali CSS per creare un sito Web con design reattivo. Quando apro la pagina di test sull'iPad in orizzontale o in verticale, sembra buona.

Tuttavia, quando si passa dalla modalità orizzontale a quella verticale, la pagina viene spostata a sinistra. Posso dire che il CSS corretto sta caricando perché cambiano altre cose nella pagina. Posso anche trascinare la pagina a destra e appare esattamente come fa se inizialmente avessi aperto la pagina in verticale.

ho la mia finestra è impostato su: meta id = "vista" name = "viewport" content = "width = device-width, iniziale di scala = 1.0, minima scala = 1.0"

ho aggiunto JavaScript per correggere il bug di ridimensionamento della vista iOS che ha causato lo zoom della pagina quando si passa da verticale a orizzontale. (Ho utilizzato la soluzione descritta qui: https://gist.github.com/901295)

Sto riscontrando problemi nel trovare il nome per il bug che sto riscontrando passando da orizzontale a verticale. Qualcun altro ha visto questo o sa come risolvere?

Answer 1

Sono riuscito a risolvere il mio problema simile - forse questo funzionerà per voi?

È necessario calcolare se si tratta di un particolare div o di un altro elemento che lo causa eliminando/ripristinando bit diversi e ripetendo il test della pagina. Una volta risolto, prova ad aggiungere una proprietà overflow: hidden a quell'elemento nel tuo CSS. Ho usato poiché il mio problema era lo scorrimento orizzontale, ma potrebbe essere necessario modificarlo.

Spero che questo sia utile ... buona fortuna!

Answer 2

prova ad aggiungere la seguente impostazione alle proprietà del contenuto: maximum-scale=1

o provare questo: user-scalable=no

here is the ios documentation

Answer 3

Il proprietario problema dice che "può anche trascinare la pagina verso destra ed è appare esattamente come fa se inizialmente avessi aperto la pagina in verticale. "
Questo mi fa pensare che, per qualche motivo sconosciuto (un bug?), La pagina si sposti verso sinistra con un cambio di orientamento in modalità verticale (altrimenti non si sarebbe in grado di trascinarlo indietro).

ho avuto un problema simile e risolto con la seguente soluzione JavaScript:

// ... 
// Optionally add a conditional here to check whether we are in Mobile Safari. 
// ... 
window.addEventListener('orientationchange', function() { 
    if (window.orientation == 0 || window.orientation == 180) { 
     // Reset scroll position if in portrait mode. 
     window.scrollTo(0, 0); 
    } 
}, false); 

Forse questo funzionerà anche per gli altri.

Answer 4

Jereon, il tuo JavaScript ha funzionato per me. Il mio viewport è:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,   minimum-scale=1, user-scalable=no" /> 

Sto utilizzando il tema reattivo Corporate Clean di Drupal. Non ho avuto questo problema utilizzando il framework a tema reattivo Omega.

Answer 5

La soluzione per questo è come proposto dal @ellawson

problema è causato da un elemento non essere scalato correttamente dal browser quando ruotando il dispositivo. Trova quell'elemento e applica l'overflow: nascosto; o overflow-x: hidden; come dice.

Answer 6

Mi sono imbattuto in questo problema con un iPad e applicato html { overflow-x:hidden; }. Questo sembra aver risolto il problema.

Answer 7

Nota: questa domanda è una duplicate. Pubblicherò l'essenza della mia risposta qui.

Aggiornamento 2015

Tutte le altre risposte sono, purtroppo, non corretta, obsoleto o sbagliata. Ecco ciò che funziona:

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

Il codice ascolta il orientationchange event e costretto a ri-flusso dell'elemento body nascondendolo e mostrarlo 10 millisecondi più tardi. Non dipende da alcun tag <meta> o query multimediali.

Lei ha detto,

Quando ho aperto la mia pagina di test sul iPad in orizzontale o in verticale, si guarda bene. Tuttavia, quando si passa dalla modalità orizzontale a quella verticale, la pagina viene spostata a sinistra

Questa è la chiave. Hai solo bisogno di forzare una riverniciatura di body.

Le risposte che suggeriscono di aggiungere <meta name="viewport" content="width=device-width, initial-scale=1.0"> o le relative varianti, a partire da Safari 7, non sono più pessime. Ecco uno demo. Per assicurarti di vedere come non funziona, inizia con l'iPad in modalità orizzontale, carica la pagina, quindi ruota. Si noti che la pagina non si espande a tutta altezza, nonostante l'utilizzo di Flexbox fino in fondo.

Confrontiamolo con this page, dove utilizziamo la tecnica del corpo di hide/show in produzione.