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?
,
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.
)Antworten:
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.).
quelle
initial-scale
Element vollständig im Ansichtsfenster-Tag weglassen , wird der HTML-Inhalt zunächst so skaliert, dass er vollständig in den Viewer passt. Mitinitial-scale=1.0
ist der Inhalt normalerweise breiter oder schmaler als der Webansichtsrahmen.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" />
quelle
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>
quelle
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
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
iPhone 4
@media screen and (max-width:800px) {
Dies ist eine massive Lippe vorwärts mit der mobilen Entwicklung ...
quelle
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 :)
quelle
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
unterstütze alle iphones, alle ipads, alle androids.
quelle
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 :)
quelle
Warum nicht einfach die Seite neu laden, wenn der Benutzer den Bildschirm mit Javascript dreht?
function doOnOrientationChange() { location.reload(); } window.addEventListener('orientationchange', doOnOrientationChange);
quelle