Come impostare meta viewport per iPhone che gestisce correttamente la rotazione?

Question

Quindi ho usato:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>

per fare in modo che il mio contenuto HTML venga visualizzato correttamente sull'iPhone. Funziona benissimo fino a quando l'utente ruota il dispositivo in modalità orizzontale, in cui il display rimane limitato a 320 px.

Esiste un modo semplice per specificare una finestra che cambia in risposta all'utente che modifica il orientamento del dispositivo? O devo ricorrere a Javascript per gestirlo?

Answer 1

Stavo solo cercando di risolverlo da solo, e la soluzione che ho trovato è stata:

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

Questo sembra bloccare il dispositivo in scala 1.0 indipendentemente dal suo orientamento. Come effetto collaterale, tuttavia disabilita completamente il ridimensionamento dell'utente (zoom con pizzico, ecc.).

Answer 2

Per chiunque sia ancora interessato:

http://wiki.phonegap.com/w/page / 16494815 / Prevenire-Scrolling-on-iphone-PhoneGap-Applications

Dalla pagina:

<meta name="viewport" content="user-scalable=no,width=device-width" />

  

Questo indica a Safari di impedire   l'utente dallo zoom nella pagina   con il "pizzico" gesto e risolve il   larghezza della porta di visualizzazione alla larghezza di   lo schermo, che orienta sempre il   iPhone è in.

Answer 3

Non vuoi perdere l'opzione di ridimensionamento dell'utente se puoi aiutarla. Mi piace questa soluzione JS di qui .

<script type="text/javascript">
(function(doc) {

    var addEvent = 'addEventListener',
        type = 'gesturestart',
        qsa = 'querySelectorAll',
        scales = [1, 1],
        meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

    function fix() {
        meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
        doc.removeEventListener(type, fix, true);
    }

    if ((meta = meta[meta.length - 1]) && addEvent in doc) {
        fix();
        scales = [.25, 1.6];
        doc[addEvent](type, fix, true);
    }

}(document));
</script>

Answer 4

Ho escogitato un approccio leggermente diverso che dovrebbe funzionare su più piattaforme

http: //www.jqui .net / tips-tricks / fissare-il-auto-scala-on-mobile-dispositivi /

Finora ho provato su

Samsun galaxy 2

• Samsung galaxy s
• Samsung galaxy s2
• Nota Samsung Galaxy (ma ho dovuto cambiare il CSS a 800 px [vedi sotto] *)
• Motorola

• iPhone 4

  • @media schermo e (larghezza massima: 800px) {

Questo è un enorme progresso con lo sviluppo mobile ...

Answer 5

Lo stai impostando per non essere in grado di ridimensionare (scala massima = scala iniziale), quindi non può ridimensionare quando ruoti in modalità orizzontale. Imposta maximum-scale = 1.6 e si ridimensionerà correttamente per adattarsi alla modalità orizzontale.

Answer 6

Ho avuto questo problema da solo e volevo entrambi essere in grado di impostare la larghezza e farlo aggiornare su rotazione e consentire all'utente di ridimensionare e ingrandire la pagina (la risposta corrente fornisce la prima ma impedisce la successiva come effetto collaterale) .. quindi mi è venuta in mente una correzione che mantiene la larghezza della vista corretta per l'orientamento, ma consente comunque lo zoom, anche se non è molto semplice.

Per prima cosa, aggiungi il seguente Javascript alla pagina web che stai visualizzando:

 <script type='text/javascript'>
 function setViewPortWidth(width) {
  var metatags = document.getElementsByTagName('meta');
  for(cnt = 0; cnt < metatags.length; cnt++) { 
   var element = metatags[cnt];
   if(element.getAttribute('name') == 'viewport') {

    element.setAttribute('content','width = '+width+'; maximum-scale = 5; user-scalable = yes');
    document.body.style['max-width'] = width+'px';
   }
  }
 }
 </script>

Quindi nel tuo - (void) didRotateFromInterfaceOrientation: (UIInterfaceOrientation) dal metodo InterfaceOrientation, aggiungi:

float availableWidth = [EmailVC webViewWidth];
NSString *stringJS;

stringJS = [NSString stringWithFormat:@"document.body.offsetWidth"];
float documentWidth = [[_webView stringByEvaluatingJavaScriptFromString:stringJS] floatValue];

if(documentWidth > availableWidth) return; // Don't perform if the document width is larger then available (allow auto-scale)

// Function setViewPortWidth defined in EmailBodyProtocolHandler prepend
stringJS = [NSString stringWithFormat:@"setViewPortWidth(%f);",availableWidth];
[_webView stringByEvaluatingJavaScriptFromString:stringJS];

È possibile apportare ulteriori modifiche modificando altre impostazioni del contenuto del viewportal:

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone-- iPad-Finestra-Orientamento-Uso-JavaScript-CSS-e-Meta-Tags.htm

Inoltre, capisco che puoi mettere un listener JS per onresize o qualcosa del genere per innescare il riscalaggio, ma questo ha funzionato per me come lo sto facendo dai framework dell'interfaccia utente Cocoa Touch.

Spero che questo aiuti qualcuno :)

Answer 7

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

supporta tutti gli iPhone, tutti gli iPad, tutti gli androidi.

Answer 8

voglio solo condividere, ho giocato con le impostazioni del viewport per il mio design reattivo, se ho impostato la scala Max su 0,8, la scala iniziale su 1 e scalabile su no, allora ottengo la vista più piccola in modalità verticale e la vista dell'iPad per il paesaggio: D ... questo è proprio un brutto trucco ma sembra funzionare, non so perché quindi non lo userò, ma risultati interessanti

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

divertiti :)

Answer 9

Perché non ricaricare la pagina quando l'utente ruota lo schermo con javascript

function doOnOrientationChange()
{
location.reload();
}

window.addEventListener('orientationchange', doOnOrientationChange);