Wie kann ich ein Ansichtsfenster-Meta für das iPhone festlegen, das die Rotation ordnungsgemäß verarbeitet?

Also habe ich verwendet:

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

Damit meine HTML-Inhalte auf dem iPhone gut angezeigt werden. Es funktioniert hervorragend, bis der Benutzer das Gerät in den Querformatmodus dreht, in dem die Anzeige auf 320 Pixel beschränkt bleibt.

Gibt es eine einfache Möglichkeit, ein Ansichtsfenster anzugeben, das sich ändert, wenn der Benutzer die Geräteorientierung ändert? Oder muss ich dazu auf Javascript zurückgreifen?

Ich habe nur versucht, das selbst herauszufinden, und die Lösung, die ich gefunden habe, war:

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

Dies scheint das Gerät unabhängig von seiner Ausrichtung im Maßstab 1.0 zu fixieren. Als Nebeneffekt wird die Benutzerskalierung jedoch vollständig deaktiviert (Quetschzoom usw.).

Für alle, die noch interessiert sind:

http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications

Von der Seite:

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

Dadurch wird Safari angewiesen, zu verhindern, dass der Benutzer mit der "Pinch" -Geste in die Seite hineinzoomt, und die Breite des Ansichtsfensters an die Breite des Bildschirms angepasst, je nachdem, in welcher Ausrichtung sich das iPhone befindet.

Sie möchten die Benutzerskalierungsoption nicht verlieren, wenn Sie helfen können. 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>

Sie stellen ein, dass es nicht skalierbar ist (maximale Skalierung = anfängliche Skalierung), sodass es nicht skaliert werden kann, wenn Sie in den Querformatmodus drehen. Stellen Sie die maximale Skalierung auf 1,6 ein und die Skalierung wird ordnungsgemäß an den Querformatmodus angepasst.

Ich habe mir einen etwas anderen Ansatz ausgedacht, der plattformübergreifend funktionieren sollte

http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/

Bisher habe ich auf getestet

Samsun Galaxie 2

• Samsung Galaxie s
• Samsung galaxy s2
• Samsung Galaxy Note (musste aber das CSS auf 800px ändern [siehe unten] *)
• Motorola

• iPhone 4

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

Dies ist eine massive Lippe vorwärts mit der mobilen Entwicklung ...

Ich hatte dieses Problem selbst und wollte sowohl die Breite einstellen als auch beim Drehen aktualisieren lassen und dem Benutzer erlauben, die Seite zu skalieren und zu zoomen (die aktuelle Antwort liefert die erste, verhindert aber die spätere als Nebeneffekt ) .. also habe ich mir einen Fix ausgedacht, der die Ansichtsbreite für die Ausrichtung korrekt hält, aber trotzdem das Zoomen ermöglicht, obwohl es nicht sehr einfach ist.

Fügen Sie zunächst das folgende Javascript zu der angezeigten Webseite hinzu:

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

Fügen Sie dann in Ihrer - (void) didRotateFromInterfaceOrientation: (UIInterfaceOrientation) fromInterfaceOrientation-Methode Folgendes hinzu:

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

Zusätzliche Optimierungen können vorgenommen werden, indem weitere Einstellungen für den Inhalt des Ansichtsfensters geändert werden:

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

Ich verstehe auch, dass Sie einen JS-Listener für eine Größenänderung oder etwas Ähnliches verwenden können, um die Neuskalierung auszulösen, aber dies hat bei mir funktioniert, da ich es über Cocoa Touch UI-Frameworks mache.

Hoffe das hilft jemandem :)

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

unterstütze alle iphones, alle ipads, alle androids.

Ich möchte nur teilen, ich habe mit den Einstellungen des Ansichtsfensters für mein responsives Design herumgespielt. Wenn ich die maximale Skalierung auf 0,8, die anfängliche Skalierung auf 1 und die Skalierbarkeit auf Nein gesetzt habe, erhalte ich die kleinste Ansicht im Hochformat und in der iPad-Ansicht für Landschaft: D ... das ist eigentlich ein hässlicher Hack, aber es scheint zu funktionieren, ich weiß nicht warum, also 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 :)

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

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

window.addEventListener('orientationchange', doOnOrientationChange);