Bootstrap 3 Succinct Capcane comune

În timp ce cercetăm pentru această serie, am întâlnit o serie de probleme potențiale, toate care vă vor cauza o anumită durere - fie cu tranziția de la v2 la v3, fie chiar când sari direct în v3. 

Câteva dintre acestea sunt valabile și pentru v2, dar, în general, le includ aici pentru că mă băteau și m-au lăsat scârțâind capul într-o mulțime de cazuri. 

Moduri de compatibilitate înapoi în Internet Explorer 

Acestuia rănit, într-adevăr rănit. Timp de o săptămână și jumătate, mergeam în cercuri, încercând să-mi dau seama de ce nu am afișat aspectul meu frumos, așa cum se aștepta în cea mai recentă versiune a IE11. 

Sa dovedit că am avut un malformed metadispozitiv tag. 

Așa cum ați putea reține din cartea BS2, există un șablon de bază care este recomandat ca punct de plecare pentru toate site-urile pe baza cadrului Bootstrap. Arata cam asa: 

Dacă observați în metaetichetați doar înăuntru capelement, veți vedea că avem chei de compatibilitate acolo pentru a permite motorului modern de redare IE să știe ce este și nu este suportat atunci când încercați să faceți lucrurile într-un mod compatibil înapoi. 

În BS3, niciuna dintre acestea nu funcționează corect. În schimb, metoda recomandată este eliminarea tuturor cheilor de tip de conținut, lăsând NUMAI IE = EDGE, și nu altele. 

Cel mai bun mod de a face acest lucru este să creați un aspect care să funcționeze perfect într-un mod standard HTML5, să includă diferitele versiuni, apoi să forțeze depanatorul IE să adopte o versiune specifică sau să facă ceva în sursa de document care va forța IE să încercați să redați conținutul într-un mod care ar fi în conformitate cu IE9 sau mai devreme. 

Din nou și din nou, m-am uitat la metaetichetă, fără să-și dea seama că a fost cauza problemelor mele. Deci, dacă primiți erori de redare ciudate în IE11, aruncați o privire în depanator și vedeți ce mod IE crede că ar trebui să vă afișeze pagina în. 

Vizualizatorul dispozitivului Internet Explorer 10 

Da, o altă problemă legată de IE. IE10 nu poate spune diferența între lățimea dispozitivului și lățimea de afișare; rezultatul este că IE10 obține întrebări media CSS greșit o mare parte din timp (nu numai în Bootstrap, ci și în alte cadre). Remedierea este suficient de simplă: adăugați o regulă CSS falsă la stilurile dvs. CSS la nivel de site care arată astfel: 

@ -ms-viewport lățime: lățimea dispozitivului; 

Aceasta rezolvă în general lucrurile, cu excepția unui caz. Cu versiunile Windows Phone mai vechi decât actualizarea 3, dispozitivul nu va interpreta lucrurile în mod corect și nu pune pagina în ecranul desktop. Pentru a remedia acest lucru, sunt necesare următoarele reguli CSS și cod JavaScript: 

@ -webkit-viewport lățime: lățimea dispozitivului;  @ -moz-viewport lățime: lățimea dispozitivului;  @ -ms-viewport lățime: lățimea dispozitivului;  @ -o-viewport lățime: lățimea dispozitivului;  @viewport width: width-width; 

"Dacă (navigator.userAgent.match (/IEMobile\/10\.0/)) var msViewportStyle = document.createElement ('stil') msViewportStyle .appendChild (document.createTextNode ('@ -ms-viewport width: auto ! important ')) document.querySelector (' cap ') appendChild (msViewportStyle) "

Nu pot totuși să acord credit pentru această remediere - este clar detaliat în documentația BS3 online. Există, de asemenea, mai multe informații despre acest subiect în ghidul de dezvoltatori Windows 8. 

Safari Procentul de rotunjire 

În unele versiuni ale Safari, motorul de randare se luptă cu numărul de zecimale în valori procentuale. 

Aceste procente sunt utilizate frecvent în col - * - 1clase de rețea și, ca urmare, veți vedea erori în redarea dimensiunilor din 12 coloane atunci când acest lucru este întâlnit. 

Există o problemă deschisă în sistemul de raportare a erorilor BS3, dar nu pot face nimic pentru ao rezolva. Documentele BS3 sugerează că încercați să adăugați o pull-dreaptaîn ultima coloană, dar cel mai bun curs de rezoluție pare să fie ajustarea manuală a valorilor bazate pe procentuale până la găsirea unui echilibru. 

Android Stock Browser 

În acest moment, versiunile Android 4.1 și versiuni ulterioare livrează aplicația "Browser" ca browser web implicit. BS3 (și multe altele) nu reușesc să redea corect în aplicația Browser din cauza numărului mare de probleme din baza de cod a browserului, și mai ales în motorul CSS în care există un număr mare de probleme cunoscute. 

Există o soluție bazată pe JavaScript pentru a modifica aspectul în documentele BS3, dar cea mai bună rezoluție este ca utilizatorul să utilizeze în schimb aplicația Chrome, care este de departe un browser mai bun și mai stabil pentru Android în general. 

Si restul? 

Există destul de multe lucruri pentru a fi conștiente și, din nou, cele mai multe dintre acestea sunt documentate în documentele BS3 și acoperă lucruri cum ar fi zoom-ul pe bază de pinch, tastaturi virtuale și modul în care diferite tipuri de porturi de vizualizare reacționează în cazul în care interogările media. 

De fapt, o scanare rapidă a celor mai frecvente probleme legate de Stack Overflow ne spune că multe dintre aceste probleme se învârt în jurul deplasării, redimensionării, zoom-ului și a problemelor bazate pe ecran tactil, care par să provină fie din cauza faptului că sunt prea mici, fie nu fiind suficient de sensibil pentru dimensiunile medii ale degetelor. 

Multe dintre aceste probleme de dimensiune pot fi rezolvate prin descărcarea distribuției surselor BS3 și fie prin modificarea celor mai micivariabile și mixuri disponibile sau prin personalizarea lucrurilor utilizând instrumentele de personalizare disponibile; acum nu mai este o idee bună să descărcați și să utilizați BS3 doar dacă nu vizează numai aplicațiile desktop. 

Dacă vizați mai multe platforme și așteptați o reacție completă, atunci trebuie să faceți o mulțime de personalizare în cârligele furnizate de autori de cadre. 

Acest tutorial reprezintă un capitol din Bootstrap 3 Succinctly, o carte electronică gratuită de la echipa de la Syncfusion.