Share
Terwijl ik aan het onderzoeken ben voor deze serie, ben ik een aantal potentiële problemen tegengekomen, die je allemaal wat verdriet zullen doen - hetzij met de overgang van v2 naar v3, of zelfs gewoon wanneer je recht naar binnen springt naar v3.
Een paar daarvan zijn ook van toepassing op v2, maar in het algemeen neem ik ze hier op omdat ze me beetnamen en me in veel gevallen mijn hoofd deden krabben.
Deze deed pijn, echt pijn. Ongeveer anderhalve week lang liep ik rond in cirkels en probeerde uit te vinden waarom mijn mooi vormgegeven lay-out niet werd weergegeven zoals verwacht in de nieuwste versie van IE11.
Het bleek dat ik een misvormde metaapparaattag.
Zoals je misschien nog wel weet uit het BS2-boek, is er een basissjabloon die wordt aanbevolen als startpunt voor alle sites op basis van het Bootstrap-framework. Het ziet er ongeveer zo uit:
Mijn website
Als je merkt in de metatag gewoon in de hoofdelement, je zult zien dat we compatibiliteitssleutels daarin hebben om de moderne IE rendering-engine te laten weten wat wel en niet wordt ondersteund wanneer ze proberen dingen op een achterwaarts compatibele manier weer te geven.
In BS3 werkt niets van dit correct. In plaats daarvan is de aanbevolen methode om alle inhoudstoetsen te verwijderen, ALLEEN latend IE = EDGE, en geen anderen.
De beste manier om dit te doen is om een lay-out te maken die perfect werkt op een HTML5-standaard manier, de verschillende versies omvat en vervolgens de foutopsporing in IE dwingt een specifieke versie te gebruiken, of iets doet met de documentbron die IE dwingt om probeer de inhoud op een manier weer te geven die deze onder IE9 of eerder zou hebben.
Steeds weer keek ik naar de metatag, zich niet realiserend dat het de oorzaak van mijn problemen was. Dus als je rare rendering-fouten krijgt in IE11, neem dan een kijkje in de foutopsporing en kijk welke modus IE volgens jou zou moeten hebben om je pagina te tonen in.
Ja mensen, nog een IE-gerelateerd probleem. IE10 kan het verschil niet zien tussen apparaat breedte en breedte van de viewport; het gevolg hiervan is dat IE10 zijn CSS media-query's vaak verkeerd doet (niet alleen in Bootstrap, maar ook in andere frameworks). De oplossing is eenvoudig genoeg: voeg een dummy CSS-regel toe aan uw CSS-stijlen voor de hele site die er als volgt uitziet:
@ -ms-viewport width: device-width;
Dat lost in het algemeen dingen op, behalve in één geval. Met Windows Phone-versies ouder dan Update 3 zal het apparaat de dingen niet correct interpreteren en de pagina in de bureaubladweergave plaatsen. Om dit op te lossen, zijn de volgende CSS-regels en JavaScript-code nodig:
@ -webkit-viewport width: device-width; @ -moz-viewport width: device-width; @ -ms-viewport width: device-width; @ -o-viewport width: device-width; @viewport width: device-width;
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) "Ik kan echter geen eer bewijzen voor deze oplossing - hij is duidelijk gedetailleerd beschreven in de BS3-documentatie online. Er is ook meer informatie over het onderwerp in de Windows 8 richtlijnen voor ontwikkelaars.
In sommige versies van Safari worstelt de rendering-engine met het aantal decimalen in percentages.
Deze percentages worden vaak gebruikt in de col - * - 1rasterklassen, en als gevolg hiervan ziet u fouten in de weergave van twaalfkolommenlay-outs wanneer dit wordt aangetroffen.
Er is een bug geopend in het BS3-bugrapport-systeem, maar er is weinig dat ze kunnen doen om het op te lossen. De BS3-documenten suggereren dat u probeert een a toe te voegen pull-rechtsnaar uw laatste kolom, maar de beste koers lijkt te zijn het handmatig aanpassen van uw op percentages gebaseerde waarden totdat een balans wordt gevonden.
Op dit moment verzenden Android-versies 4.1 en hoger de standaardbrowser de "Browser" -app. BS3 (en vele andere) worden niet correct weergegeven in de Browser-app vanwege het grote aantal problemen in de codebasis van de browser, en meer in de CSS-engine waar er een groot aantal bekende problemen zijn.
Er is een op JavaScript gebaseerde oplossing om uw lay-outs in de BS3-documenten te patchen, maar de beste oplossing is dat de gebruiker de Chrome-app gebruikt, wat veruit een betere en stabielere browser is voor Android in het algemeen.
Er zijn nogal wat dingen om op te letten, en nogmaals, de meeste hiervan zijn gedocumenteerd in de BS3-documenten en hebben betrekking op knijpers gebaseerde zoomen, virtuele toetsenborden en hoe verschillende soorten weergavepoorten reageren op vragen over media.
Een snelle scan van de meest voorkomende problemen met Stack Overflow leert ons dat een groot aantal van de problemen draait om scrollen, vergroten of verkleinen, zoomen en algemene op het aanraakscherm gebaseerde problemen die voortkomen uit of dingen te klein zijn, of niet gevoelig genoeg voor gemiddelde vingergroottes.
Veel van deze problemen met de grootte kunnen worden opgelost door de BS3-bronverdeling te downloaden en de Less-waarde te wijzigenvariabelen en mixins beschikbaar, of door dingen aan te passen met behulp van de beschikbare aanpassingshulpmiddelen; het is nu niet langer een goed idee om BS3 te downloaden en te gebruiken, tenzij u alleen desktop-apps target.
Als u meerdere platforms target en volledige respons verwacht, moet u echt veel aanpassen aan de voorwaarden van de auteurs van het framework..
Deze tutorial staat voor een hoofdstuk van Bootstrap 3 Shortlyly, een gratis eBoek van het team van Syncfusion.
