wake-up-neo.com

Das Meta-Viewport-Tag scheint vollständig zu ignorieren oder hat keine Auswirkungen

Ich habe dieses Tag in den Kopf von einer Webseite eingefügt:

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

Aus irgendeinem Grund scheint es auf meinem iPhone einfach ignoriert zu werden, selbst das Hinzufügen von user-scalable=no hat keine Auswirkungen. Ich habe viele Werte für Breite, Anfangskala usw. ausprobiert ... nichts scheint irgendeinen Effekt zu haben.

Weiß jemand, was das verursacht? Ich kann in der Quelle deutlich sehen, dass es dort im Header steht.

Mein iPhone ist auf iOS7.

Edit: Das Problem tritt unter iOS6 mit dem Xcode-ios-Simulator immer noch auf, daher glaube ich nicht, dass es an iOS7 liegt.

htmliphoneioscss
11
waffl

Es funktioniert! Auf Ihrer Seite verwenden Sie:

<meta content="width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1" name="viewport">

Wenn ich die Seite auf meinem Handy (ios7 iphone5) öffne, sehe ich genau das richtige Ergebnis.

Sind Sie zu 100% sicher, dass Sie wirklich Folgendes in Ihren Code aufgenommen haben?

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

Es wird nicht ignoriert.

UPDATE1

Ich habe gerade gesehen, dass Sie in Ihrem Code den zweiten Viewport verwenden, aber ich werde wahrscheinlich durch Javascript in den 640px-Viewport geändert. Vielleicht ist es der Grund, warum es für Sie so aussieht, als würde es ignoriert. Weil zur Laufzeit der Viewport geändert wird ...

UPDATE2

Ok fand das Problem.

function updateWidth(){
    viewport = document.querySelector("meta[name=viewport]");
    if (window.orientation == 90 || window.orientation == -90) {
        viewport.setAttribute('content', 'width=1401, initial-scale=0.34, maximum-scale=1.0, user-scalable=1');
    }
    else {
        viewport.setAttribute('content', 'width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1');
    }
}

Ihre Seite ruft diese Funktion auf, die Ihr Ansichtsfenster überschreibt. Wussten Sie von dieser Funktion?

28
Andreas Daoutis

Ich weiß, dass dies eine hella alte Frage ist, aber es war das erste Ergebnis in Google, als ich dieses Problem hatte. Ich dachte, ich würde ein Update in Bezug auf iOS 10 durchführen.

Es scheint, dass Apple jetzt das user-scalable=no in iOS 10 vollständig überschreibt, um die Zugänglichkeit zu verbessern

Siehe: Twitter-Beitrag von Thomas Fuchs

6
ConduciveMammal

Die Breite des Ansichtsfensters ist bei den Mai-Geräten unterschiedlich. iOS hat 320, Android hat 360 im Hochformat. Querformat-Modus - es hängt davon ab, welches Gerät Sie verwenden, Sie werden unterschiedliche Breiten haben. 

Der beste Weg, um eine Website für Mobilgeräte zu optimieren, ist die Einstellung width = device width. Wenn Sie die anfängliche Skalierung nicht auf 1,0 setzen, wird der Bildschirm beim Ändern der Gerätedrehung vergrößert (vergrößert). 

Diese Meta ist alles was Sie brauchen.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Wenn Sie die Zoom-Funktion deaktivieren möchten, legen Sie user-scalable = no fest

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

Nicht hart codieren, da die Breite für den Hoch- und Querformatmodus gleich ist. Dies ist eine äußerst unangenehme Erfahrung für den Benutzer.

Am besten dokumentiert: https://developer.Apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Über iOs 7 Darüber hinaus würde ich sagen - machen Sie sich jetzt keine Sorgen um iOS7. Es hat so viele Fehler. Lesen Sie hier: http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/

5
Shekhar K. Sharma

Sie sollten den folgenden Code als Abhilfe versuchen:

html { 
    zoom: .8; 
}
3
WvdW

Es scheint, dass ios7 das Meta-Tag nicht richtig erkennt. Hier sind die Links, die Ihnen helfen können.

Webapp skaliert nicht richtig in iOS 7

http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

2
sourav

Sie sollten sich noch keine Gedanken über IOS 7 machen, es hat so viele Fehler: http://www.infoworld.com/t/html5/bad-news-ios-7s-html5-full-of -bugs-227685

Möglicherweise ist Ihr Code vollkommen in Ordnung, aber Problem mit iOS?

1
user2836265

Verwenden Sie den folgenden Code.

<meta name="viewport" content="width=320, initial-scale=1, user-scalable=yes">

In vielen meiner Projekte funktioniert das gut.

0
Fahim Parkar