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

76

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?

George Armhold
quelle
Lesen Sie hier gut darüber - developer.mozilla.org/en-US/docs/Mobile/…
vsync
Nur ein Hinweis - --- Schlüsselpaar-Trennzeichen sollte ,nicht sein ;--- gibt einen Analysefehler in Google Chrome ( Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead.)
Bill

Antworten:

108

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

Tobias Cohen
quelle
5
Außerdem wird verhindert, dass die Größe von Inhalten bei der Erstanzeige korrekt bemessen wird. Wenn Sie das initial-scaleElement vollständig im Ansichtsfenster-Tag weglassen , wird der HTML-Inhalt zunächst so skaliert, dass er vollständig in den Viewer passt. Mit initial-scale=1.0ist der Inhalt normalerweise breiter oder schmaler als der Webansichtsrahmen.
MusiGenesis
Ich habe einen etwas anderen Ansatz, der damit umgehen sollte, mit ein wenig Optimierung, solange Sie die Idee verstehen, jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices
Val
18

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.

Matt Lyons
quelle
10
Das Verhindern der Benutzerskalierung verhindert nicht, dass Safari bei Rotation neu skaliert wird.
Leopd
6
Aber warum den Zoom deaktivieren?
Nroose
5
Ich hasse diese mobilen Websites, die das Zoomen deaktivieren
Aximili
@nroose 300ms auf dem Handy zu sparen?
Guillaume Vincent
@guillaumevincent Hoffe, Sie haben nie die Sehprobleme, die ich habe.
Nroose
10

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>
Und schlussendlich
quelle
Dope! Mir ist aufgefallen, dass ich anfangs nur mein Meta-Tag mit width = device-width und sonst nichts setzen musste. Super beeindruckt von diesem Fix.
Shane
2

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.


quelle
Hmm, habe das gerade versucht und es scheint keine Wirkung zu haben. Es ist, als ob die Abmessungen des UIWebView irgendwie auf die Abmessungen der Hochformatausrichtung festgelegt sind.
George Armhold
2

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

Val
quelle
1

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

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

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

Piseth Sok
quelle
-1

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

Mads
quelle
-1

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

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

window.addEventListener('orientationchange', doOnOrientationChange);
ScottC
quelle