Wie Ansichtsfenster meta für iPhone einstellen, die Rotation richtig behandelt?

Question

Also ich habe mit:

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

zu meinem HTML-Inhalt erhalten schön auf dem iPhone angezeigt werden soll. Es funktioniert großartig, bis der Benutzer dreht sich das Gerät in Landscape-Modus, in dem die Anzeige auf 320px erzwungener bleibt.

Gibt es eine einfache Möglichkeit, ein Ansichtsfenster, das die in Reaktion auf den Benutzer ändert sich festlegen zu ändern Vorrichtung Orientierung? Oder muss ich zurückgreifen zu Javascript, dass zu behandeln?

Answer 1

habe nur versucht, diese selbst zu erarbeiten und die Lösung kam ich mit war:

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

Dies scheint das Gerät in 1,0 Skala zu sperren, unabhängig davon Orientierung ist. Als Nebeneffekt, hat es jedoch vollständig zu deaktivieren Anwenderskalierung (Pinch Zoom, etc.).

Answer 2

Für alle noch interessiert:

http://wiki.phonegap.com/w/page / 16494815 / Verhindern-Scrolling-on-iPhone-Phonegap-Anwendungen

Auf der Seite:

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

  

Das weist Safari zu verhindern   der Benutzer von Zoomen in die Seite   mit der „Prise“ Geste und fixiert die   Breite der Sichtöffnung an die Breite des   der Bildschirm, die immer die Orientierung   iPhone ist in.

Answer 3

Sie wollen nicht auf die Anwender-Skalierung Option zu verlieren, wenn Sie es vermeiden kann. Ich mag diese JS-Lösung von hier .

<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

Ich habe mit einem slighly anderen Ansatz kommen, die auf cross-Plattformen

funktionieren sollen

http: //www.jqui .net / Tipps-Tricks / Fixier-the-auto-Scale-on-mobile-Geräte /

Bisher habe ich getestet in auf

Samsun Galaxie 2

• Samsung Galaxy S
• Samsung Galaxy S2
• Samsung Galaxy Note (hatte aber die CSS zu 800px ändern [siehe unten] *)
• Motorola

• iPhone 4

  • @media screen and (max-width:800px) {

Dies ist eine massive Lippe nach vorn mit mobiler Entwicklung ...

Answer 5

Sie richten es nicht in der Lage sein, zu skalieren (maximal angelegte = Anfangs-Skala), so kann es nicht skalieren, wenn Sie in dem Querformat drehen. Setzt die maximale angelegte = 1,6 und es wird maßstäblich richtig Querformat passen.

Answer 6

Ich hatte dieses Problem selbst, und ich wollte beide in der Lage sein, die Breite zu setzen, und habe es auf mich drehen aktualisieren und dem Benutzer erlauben, um die Seite zu skalieren und vergrößern (die aktuelle Antwort liefert die erste, aber verhindert, dass die später als Nebeneffekt) .. so kam ich mit einem Fix up, die die Ansicht Breite richtig für die Ausrichtung hält, erlaubt aber nach wie vor für das Zoomen, obwohl es nicht super gerade nach vorne ist.

Fügen Sie zunächst die folgende Javascript auf der Webseite Sie anzeigen:

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

Dann in Ihrer - (void) didRotateFromInterfaceOrientation: (UIInterfaceOrientation) fromInterfaceOrientation Methode hinzufügen:

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];

Weitere Tweaking kann durch Modifikation mehrere der viewportal Inhaltseinstellungen vorgenommen werden:

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone-- iPads-Ansichtsfenster-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm

Auch verstehe ich Ihnen einen JS Hörer für onresize oder etwas setzen können wie die Neuskalierung auslösen, aber das funktionierte für mich, wie ich es von Cocoa Touch UI-Frameworks machte.

Hope, das hilft jemand:)

Answer 7

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

suport alle iphones, alle ipads, alle Androiden.

Answer 8

möge nur teilen, ich habe um mit den Darstellungseinstellungen für mein Responsive Design gespielt, wenn ich die Max-Skala auf 0,8, den anfänglichen Maßstab 1 und skalierbar auf no gesetzt, dann ich die kleinste Ansicht im Portrait-Modus erhalten und die iPad-Ansicht für Landschaft: D ... das ist richtig ein hässlicher Hack, aber es scheint zu funktionieren, ich weiß nicht, warum so werde ich es nicht verwenden, aber interessante Ergebnisse

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

genießen:)

Answer 9

Warum nicht einfach die Seite neu zu laden, wenn der Benutzer den Bildschirm mit Javascript dreht

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

window.addEventListener('orientationchange', doOnOrientationChange);