Share
Bei der Recherche für diese Serie bin ich auf eine Reihe potenzieller Probleme gestoßen, die alle zu Trauer führen werden - entweder beim Übergang von v2 zu v3 oder auch nur, wenn Sie direkt zu v3 springen.
Einige davon sind auch auf Version 2 anwendbar, aber im Allgemeinen schließe ich sie hier ein, weil sie mich gebissen haben und mich in vielen Fällen den Kopf kratzen ließen.
Das tat weh, wirklich weh. Etwa eineinhalb Wochen lang ging ich im Kreis herum und versuchte herauszufinden, warum mein gut entworfenes Layout in der neuesten Version von IE11 nicht wie erwartet angezeigt wurde.
Es stellte sich heraus, dass ich eine Fehlform hatte MetaGerätekennzeichnung.
Wie Sie sich vielleicht aus dem BS2-Buch erinnern, gibt es eine grundlegende Vorlage, die als Ausgangspunkt für alle Websites empfohlen wird, die auf dem Bootstrap-Framework basieren. Es sieht ungefähr so aus:
Meine Seite
Wenn du es in der Metatag nur im KopfSie werden sehen, dass wir mit Kompatibilitätsschlüsseln ausgestattet sind, damit die moderne IE-Rendering-Engine wissen kann, was unterstützt wird und nicht, wenn versucht wird, Dinge abwärtskompatibel zu rendern.
In BS3 funktioniert das alles nicht richtig. Stattdessen wird empfohlen, alle Schlüssel für den Inhaltstyp zu entfernen und NUR zu belassen IE = EDGE, und keine anderen.
Am besten erstellen Sie dazu ein Layout, das perfekt nach HTML5-Standard arbeitet, die verschiedenen Versionen einschließen, dann entweder den IE-Debugger dazu zwingen, eine bestimmte Version zu übernehmen, oder etwas mit der Dokumentquelle tun, das den IE zwingt versuchen, den Inhalt so wiederzugeben, wie dies unter IE9 oder früher der Fall wäre.
Immer wieder schaute ich auf die Metatag, ohne zu wissen, dass es die Ursache meiner Probleme war. Wenn Sie also einen seltsamen Rendering-Fehler in IE11 erhalten, schauen Sie im Debugger nach, in welchem Modus der IE Ihrer Ansicht nach Ihre Seite anzeigen sollte.
Ja Leute, ein anderes IE-Problem. IE10 kann den Unterschied nicht erkennen Gerätebreite und Breite des Ansichtsfensters; Das Ergebnis davon ist, dass der IE10 seine CSS-Medienabfragen häufig falsch ausführt (nicht nur in Bootstrap, sondern auch in anderen Frameworks). Das Update ist ganz einfach: Fügen Sie Ihren CSS-Stilen für die gesamte Site eine Dummy-CSS-Regel hinzu, die folgendermaßen aussieht:
@ -ms-viewport Breite: Gerätebreite;
Das repariert im Allgemeinen Dinge, außer in einem Fall. Bei Windows Phone-Versionen vor Update 3 interpretiert das Gerät die Dinge nicht richtig und versetzt die Seite in die Desktopansicht. Um dies zu beheben, werden folgende CSS-Regeln und JavaScript-Code benötigt:
@ -webkit-viewport Breite: Gerätebreite; @ -moz-viewport Breite: Gerätebreite; @ -ms-viewport Breite: Gerätebreite; @ -o-viewport Breite: Gerätebreite; @Ansicht Breite: Gerätebreite;
Accentsconagua
“If (navigator.userAgent.match (/IEMobile\/10\.0/)) var msViewportStyle = document.createElement ('style') msViewportStyle .appendChild (document.createTextNode ('@ -ms-viewport width: auto ! important ')) document.querySelector (' head '). appendChild (msViewportStyle) "Ich kann diesen Fix jedoch nicht anerkennen - er ist in der BS3-Dokumentation online ausführlich beschrieben. Weitere Informationen zu diesem Thema finden Sie auch in den Windows 8-Entwicklerrichtlinien.
In einigen Versionen von Safari hat die Rendering-Engine Probleme mit der Anzahl der Dezimalstellen in Prozentwerten.
Diese Prozentsätze werden häufig im Internet verwendet col - * - 1Raster-Klassen, und als Ergebnis werden Fehler beim Rendern von 12-Spalten-Layouts angezeigt, wenn dies auftritt.
Es gibt einen Fehler im BS3-Fehlerberichtssystem, aber sie können wenig tun, um den Fehler zu beheben. Die BS3-Dokumente schlagen vor, a nach rechts ziehenin Ihrer letzten Spalte, aber die beste Lösung scheint die manuelle Anpassung Ihrer prozentualen Werte zu sein, bis ein Gleichgewicht gefunden wird.
Derzeit werden Android-Versionen 4.1 und höher mit der Browser-App als Standard-Webbrowser ausgeliefert. BS3 (und viele andere) können aufgrund der großen Anzahl von Problemen in der Codebasis des Browsers nicht korrekt in der Browser-App dargestellt werden. Dies gilt insbesondere für die CSS-Engine, in der eine Vielzahl bekannter Probleme auftreten.
Es gibt eine JavaScript-basierte Lösung zum Patchen Ihrer Layouts in den BS3-Dokumenten. Die beste Lösung ist jedoch, dass der Benutzer stattdessen die Chrome-App verwendet. Dies ist bei weitem ein besserer und stabilerer Browser für Android im Allgemeinen.
Es gibt noch einige weitere Dinge, die Sie beachten sollten, und die meisten davon sind in den BS3-Dokumenten dokumentiert und behandeln Dinge wie das Zoomen auf Pinch-Basis, virtuelle Tastaturen und wie verschiedene Arten von Ansichtsanschlüssen auf Medienabfragen reagieren.
Tatsächlich zeigt ein kurzer Scan der häufigsten Probleme beim Stack Overflow, dass sich viele Probleme um Scrollen, Ändern der Größe, Zoomen und allgemeine Touchscreen-basierte Probleme drehen, die auf zu kleine oder zu kleine Dinge zurückzuführen sind nicht empfindlich genug für durchschnittliche Fingergrößen.
Viele dieser Größenprobleme können gelöst werden, indem Sie die BS3-Quelldistribution herunterladen und die Less-Version ändernverfügbare Variablen und Mixins oder durch Anpassen der Elemente mithilfe der verfügbaren Anpassungstools; Es ist jetzt keine gute Idee, BS3 einfach herunterzuladen und zu verwenden, es sei denn, Sie zielen nur auf Desktop-Apps ab.
Wenn Sie auf mehrere Plattformen abzielen und eine volle Reaktionsfähigkeit erwarten, müssen Sie in den von den Framework-Autoren bereitgestellten Hooks eine Menge Anpassungen vornehmen.
Dieses Tutorial enthält ein Kapitel von Bootstrap 3 Succinctly, ein kostenloses eBook des Teams von Syncfusion.
