Problem mit IE 10 auf Windows Phone 8 Viewport beheben

(function() {
  if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement("style");
    msViewportStyle.appendChild(
      document.createTextNode("@-ms-viewport{width:auto!important}")
    );
    document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
  }
})();

Kurzer Hintergrund

Damit IE 10 (Desktop) in seinem neuen „Snap-Modus“ funktioniert, müssen Sie Folgendes verwenden

@-ms-viewport {
  width: device-width;
}

Aber das ruiniert einige Windows Phone 8-Telefone, überschreibt das Meta-Viewport-Tag und wird auf kleinen Bildschirmen viel zu groß dargestellt. Die Antwort ist also vorerst dieses knifflige Skript zur Geräteerkennung/-einfügung.

Längerer Hintergrund

Matt Stow: Responsive Design in IE10 on Windows Phone 8
Tim Kadlec: Windows Phone 8 and Device-Width

Kommentare

Darin

# 13. Januar 2014

Wir nutzen das, aber es stört das Zendesk-Popup, da das Skript beim Laden ausgeführt wird und das Zendesk-Popup mehr als doppelt so breit ist.

Antworten

Ben

# 22. Februar 2014

Ich versuche, eine Web-App für Windows Phone 8 zu erstellen, die die volle Bildschirmauflösung benötigt

Es scheint, dass es keinen Weg gibt, dies zu entdecken

Die Verwendung von

Das wird immer 320 sein

Die Verwendung von JavaScript screen.width gibt 320 zurück

Die Verwendung von JavaScript screen.availWidth gibt 320 zurück

Ich habe etwas Code zusammengestellt, der vorerst zu funktionieren scheint

JavaScript

window.devicePixelRatio = window.devicePixelRatio || screen.deviceXDPI / screen.logicalXDPI;
var actualWidth = screen.width * window.devicePixelRatio;
actualWidth = actualWidth - (actualWidth % 2);
var actualHeight = screen.height * window.devicePixelRatio;
actualHeight = actualHeight - (actualHeight % 2);

// TEMP FIX!
if(actualHeight == 1282){
    actualHeight = 1280;
}

$(window).bind('resize', function() {
    if(window.innerHeight > window.innerWidth){
        // portrait
        width = actualWidth;
        height = window.innerHeight;
    }else{
        // landscape
        width = actualHeight;
        height = window.innerHeight;
    }

    $('html').css('width', width);
    $('body').css('width', width);
}).trigger('resize');

CSS

@media screen and (orientation:portrait) {
    @-ms-viewport { width: 720px; }
}
@media screen and (orientation:landscape) {
    @-ms-viewport { width: 1280px; }
}

Jede Hilfe/Rat zu diesem Problem wäre sehr willkommen, danke!

Antworten

Max Scheffler

# 13. März 2014

http://jsperf.com/bytagname-vs-head

Antworten

Grucom

# 17. Mai 2014

Eine Lösung von einem Genie auf dieser Website: https://www.campaignmonitor.com/forums/topic/7989/windows-phone-8-has-full-css3media-query-support/

Er hat das Problem im Alleingang gelöst! \o/

Ich bin so unglaublich glücklich, diese Lösung gefunden zu haben, dass ich sie überall im Web poste, wo mir die Hinweise gegeben wurden, um mein responsives HTML zu erstellen. Und auch als "Dankeschön" für all eure Beiträge.

Antworten

Hannes

# 6. Juni 2014

Was ich aus keinem der Beiträge lese ist, ob der Code im Kopf innerhalb eines Tags stehen sollte? Oder kann er in einer der .js-Dateien sein? Wenn ja, dann im Header oder direkt nach dem Tag?

Antworten

Hannes

# 6. Juni 2014

In meinem ersten Satz wollte ich sagen: "... sollte im Kopf in einem Skript-Tag stehen?"

Antworten

Albin

# 6. Juni 2014

Dieser Fehler wurde in Windows Phone 8 Update 3 behoben.

Siehe: Introducing Windows Phone Preview for Developers

Antworten

Stanislav

# 8. Januar 2015

Hallo!
Ist hier das Leerzeichen vor dem !important erforderlich? Oder nicht?

“@-ms-viewport{auto !important}”
anstelle von
“@-ms-viewport{auto!important}”

Andernfalls funktioniert der Code nicht!

Antworten

Stanislav

Permalink zum Kommentar# 8. Januar 2015

Oh, Entschuldigung.
Es war eine fehlerhafte Annahme!

Aber ich muss noch etwas sagen.
In meinem Fall.
Dieser Code funktionierte nicht, bevor ich den folgenden Tag hinzugefügt habe

Danke!

Stanislav

# 8. Januar 2015

Entschuldigung, der Code wurde nicht angezeigt – ich meinte das

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Antworten

Brian Funt

# 23. Januar 2015

Könntest du das nicht einfach so machen?

@-ms-viewport {
  width: 100%;
}

Antworten

mani

# 6. Februar 2015

Ich habe den Code wie angegeben eingefügt, aber er erfüllt immer noch nicht seinen Zweck. Es wird ein Style-Knoten mit dem Inhalt -ms-viewport erstellt.

In DOM wurde es so erstellt:

@-ms-viewport{width:auto !important}

Der Code, den ich eingefügt habe, befindet sich direkt nach dem Head-Tag.

Antworten

an van

# 15. November 2015

Ich habe ein neues Problem mit Microsoft Edge gefunden.
Bitte folgen Sie dem Link unten.
https://jsfiddle.net/vxba/pm4zvspn/4/

und helfen Sie mir bei diesem Problem.
Vielen Dank!

Antworten

an van

Permalink zum Kommentar# 15. November 2015

Es tut mir leid, ich habe etwas Wichtiges weggelassen.
Fügen Sie zuerst eine neue Zeile mit einem Button "Hinzufügen" hinzu.
Sie können auf den grünen Bereich des Buttons "Löschen" klicken und dann auf einen anderen Button, dann sehen Sie mein Problem.

SammieFox

# 9. Mai 2016

http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
(scrollen Sie nach unten und lesen Sie die letzten beiden Einträge)

Antworten

Arthur Stolyar

# 23. Dezember 2016

Wahrscheinlich zu spät dafür, aber es könnte auf diese Weise viel einfacher sein

@media screen and (-ms-view-state: snapped) {
@-ms-viewport { width: device-width }
}

Antworten

Kurzer Hintergrund

Längerer Hintergrund

Kommentare

Antwort hinterlassen Antwort abbrechen