Share
Mens jeg forsket på denne serien, har jeg kommet over en rekke potensielle problemer, som alle vil gi deg litt sorg - enten med overgangen fra v2 til v3, eller til og med bare når du hopper rett inn til v3.
Noen av disse gjelder også for v2, men generelt inkluderer jeg dem her fordi de slo meg og lot meg klare meg i mange tilfeller.
Denne skadet, virkelig vondt. I omtrent en og en halv time gikk jeg rundt i sirkler og prøvde å finne ut hvorfor min pent utformede layout ikke viste som forventet i den nyeste versjonen av IE11.
Det viste seg at jeg hadde en misdannelse metaenhetsmerke.
Som du kanskje husker fra BS2-boken, er det en grunnleggende mal som anbefales som utgangspunkt for alle nettsteder basert på Bootstrap-rammeverket. Det ser noe ut som dette:
Min side
Hvis du merker i metatag bare inne i hodeelementet, ser du at vi har kompatibilitetsnøkler der inne for å tillate den moderne IE-rendering-motoren å vite hva som er og ikke støttes når du prøver å gjengi ting på en bakoverkompatibel måte.
I BS3 virker ingen av dette riktig. I stedet er den anbefalte metoden å fjerne alle innholdstastene dine, bare etterlate IE = EDGE, og ingen andre.
Den beste måten å gjøre dette på er å lage en layout som fungerer perfekt på en HTML5-standard måte, inkludere de ulike versjonene, og enten tvinge IE-feilsøkeren til å vedta en bestemt versjon eller gjøre noe for dokumentkilden som vil tvinge IE til forsøk å gjøre innholdet på en måte som det ville under IE9 eller tidligere.
Om og om igjen så jeg på metatag, ikke innser at det var årsaken til mine problemer. Så hvis du får noen rare gjengivelsesfeil i IE11, ta en titt i debuggeren og se akkurat hvilken modus IE mener at den skal vise siden din i.
Ja folk, et annet IE-relatert problem. IE10 kan ikke fortelle forskjellen mellom enhetsbredde og visningsbredde; Resultatet av dette er at IE10 får sine CSS-medieforespørsler feil mye (ikke bare i Bootstrap, men også andre rammer). Løsningen er enkel nok: Legg til en dummy CSS-regel til nettstedets brede CSS-stiler som ser slik ut:
@ -ms-viewport bredde: enhetsbredde;
Det korrigerer vanligvis ting, bortsett fra i ett tilfelle. Med Windows Phone-versjoner tidligere enn oppdatering 3, tolker enheten ikke ting riktig og legger siden til skrivebordet. For å fikse dette, er det nødvendig med følgende CSS-regler og JavaScript-kode:
@ -webkit-viewport width: device-width; @ -moz-viewport bredde: enhetsbredde; @ -ms-viewport bredde: enhetsbredde; @ -o-viewport bredde: enhetsbredde; @viewport width: device-width;
Accentsconagua
"Hvis (navigator.userAgent.match (/IEMobile\/10\.0/)) var msViewportStyle = document.createElement ('style') msViewportStyle .appendChild (document.createTextNode ('@ -ms-viewport width: auto ! viktig ')) document.querySelector (' head '). appendChild (msViewportStyle) "Jeg kan ikke ta æren for denne løsningen, men det er tydelig detaljert i BS3-dokumentasjonen på nettet. Det er også mer informasjon om emnet i Windows 8 utvikler retningslinjer.
I noen versjoner av Safari sliter renderingsmotoren med antall desimaler i prosentverdier.
Disse prosentene brukes ofte i col - * - 1grid klasser, og som et resultat vil du se feil i gjengivelsen av 12-kolonneoppsett når dette oppstår.
Det er en feil i BS3-feilrapporteringssystemet, men det er lite de kan gjøre for å løse det. BS3-dokumentene foreslår at du prøver å legge til en pull-righttil den siste kolonnen din, men det beste løpet av oppløsning ser ut til å være manuell justering av dine prosentbaserte verdier til en balanse er funnet.
På denne tiden lever Android-versjoner 4.1 og nyere med "Browser" -appen som standard nettleser. BS3 (og mange andre) mislykkes i å gjøre det riktig i nettleserprogrammet på grunn av det store antallet problemer i nettleserens kodebase og mer i CSS-motoren der det er et stort antall kjente problemer.
Det finnes en JavaScript-basert løsning for å lapp opp layoutene dine i BS3-dokumentene, men den beste oppløsningen er at brukeren skal bruke Chrome-appen i stedet, noe som langt er en bedre og mer stabil nettleser for Android generelt.
Det er mange flere ting å være klar over, og igjen, de fleste av disse er dokumentert i BS3-dokumentene og dekker ting som klypebasert zooming, virtuelle tastaturer og hvordan forskjellige typer visningsportene reagerer der media-spørringer er opptatt.
Faktisk forteller en rask skanning av de vanligste problemene på Stack Overflow oss at mange av problemene dreier seg om å rulle, endre størrelse, zoome og generelle berøringsbaserte problemer som synes å stammer fra at enten ting er for små eller Ikke følsom nok for gjennomsnittlig fingerstørrelser.
Mange av disse størrelsesproblemene kan løses ved å laste ned BS3-kildefordelingen, og enten endre Mindrevariabler og mixins tilgjengelig, eller ved å tilpasse ting ved hjelp av tilpasningsverktøyene som er tilgjengelige det er nå ikke lenger en god ide å bare laste ned og bruke BS3 med mindre du bare målretter mot skrivebordsprogrammer.
Hvis du målretter mot flere plattformer og forventer full respons, må du virkelig gjøre mye tilpasning i kroker fra rammebeskrivelse.
Denne opplæringen representerer et kapittel fra Bootstrap 3 Succinctly, en gratis eBok fra teamet ved Syncfusion.
