Share
Durante le ricerche per questa serie, ho riscontrato una serie di potenziali problemi, che ti causeranno un po 'di dolore, sia con la transizione dalla v2 alla v3, sia con il semplice passaggio alla v3.
Alcuni di questi sono applicabili anche alla v2, ma in generale li sto includendo qui perché mi hanno morso e mi hanno lasciato grattarmi la testa in molti casi.
Questo ferito, davvero ferito. Per circa una settimana e mezza, stavo girando in tondo, cercando di capire perché il mio layout ben fatto non fosse visualizzato come previsto nell'ultima versione di IE11.
Si è scoperto che avevo un malformato metatag del dispositivo.
Come puoi ricordare dal libro di BS2, esiste un modello di base consigliato come punto di partenza per tutti i siti basati sul framework Bootstrap. Sembra qualcosa del genere:
Il mio sito
Se noti in metatag appena dentro il capoelemento, vedrai che abbiamo le chiavi di compatibilità in là per consentire al moderno motore di rendering di IE di sapere cosa è e cosa non è supportato quando provi a rendere le cose in un modo compatibile con le versioni precedenti.
In BS3, nessuno di questi funziona correttamente. Invece, il metodo consigliato è quello di rimuovere tutte le chiavi del tipo di contenuto, lasciando SOLO IE = BORDO, e nessun altro.
Il modo migliore per farlo è creare un layout che funzioni perfettamente in un modo standard HTML5, includere le varie versioni, quindi forzare il debugger di IE ad adottare una versione specifica o fare qualcosa per l'origine del documento che costringerà IE a tenta di rendere il contenuto in un modo che sarebbe sotto IE9 o precedenti.
Più e più volte, ho guardato il metatag, non rendendosi conto che era la causa dei miei problemi. Quindi se ricevi errori di rendering strani in IE11, dai un'occhiata al debugger e vedi solo quale modalità IE crede che dovrebbe mostrare la tua pagina in.
Sì gente, un altro problema correlato a IE. IE10 non può dire la differenza tra larghezza del dispositivo e larghezza della finestra; il risultato è che IE10 ottiene le sue query multimediali CSS errate molto (non solo in Bootstrap, ma anche in altri framework). La correzione è abbastanza semplice: aggiungi una fittizia regola CSS agli stili CSS del tuo sito che assomigliano a questo:
@ -ms-viewport width: device-width;
Questo generalmente risolve le cose, tranne in un caso. Con le versioni di Windows Phone precedenti all'Aggiornamento 3, il dispositivo non interpreterà le cose correttamente e metterà la pagina in visualizzazione desktop. Per risolvere questo problema, sono necessarie le seguenti regole CSS e codice JavaScript:
@ -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) "Tuttavia non posso prendermi il merito di questa correzione: è chiaramente dettagliata nella documentazione BS3 online. Ci sono anche ulteriori informazioni sull'argomento nelle linee guida per gli sviluppatori di Windows 8.
In alcune versioni di Safari, il motore di rendering lotta con il numero di cifre decimali in valori percentuali.
Queste percentuali sono usate spesso nel Col - * - 1classi di griglia e, di conseguenza, vedrai errori nel rendering dei layout a 12 colonne quando questo viene rilevato.
C'è un bug aperto nel sistema di segnalazione bug di BS3, ma c'è poco che possano fare per risolverlo. I documenti BS3 suggeriscono di provare ad aggiungere un pull-destraalla tua ultima colonna, ma il miglior corso di risoluzione sembra essere il tweaking manuale dei valori basati sulla percentuale fino a quando non viene trovato un equilibrio.
Al momento, le versioni Android 4.1 e successive vengono fornite con l'app "Browser" come browser Web predefinito. BS3 (e molti altri) non riescono a eseguire correttamente il rendering nell'app Browser a causa dell'elevato numero di problemi nella base di codice del browser, e ancora di più nel motore CSS in cui vi è un gran numero di problemi noti.
Esiste una soluzione basata su JavaScript per correggere i tuoi layout nei documenti BS3, ma la migliore risoluzione è per l'utente invece di utilizzare l'app Chrome, che è di gran lunga un browser migliore e più stabile per Android in generale.
Ci sono molte altre cose a cui prestare attenzione, e ancora una volta, la maggior parte di queste sono documentate nei documenti BS3 e riguardano cose come lo zoom a pinch, le tastiere virtuali e il modo in cui i diversi tipi di porte di visualizzazione reagiscono quando le query sui media sono interessate.
Infatti, una rapida scansione dei problemi più comuni su Stack Overflow ci dice che molti dei problemi riguardano lo scorrimento, il ridimensionamento, lo zoom e i problemi generali basati sul touch screen che sembrano derivare da entrambe le cose troppo piccole, o non essere abbastanza sensibile per le dimensioni medie delle dita.
Molti di questi problemi di dimensioni possono essere risolti scaricando la distribuzione dell'origine BS3 e alterando il Lessvariabili e mixin disponibili, o personalizzando le cose usando gli strumenti di personalizzazione disponibili; ora non è più una buona idea solo scaricare e utilizzare BS3, a meno che non si tratti solo di app desktop.
Se stai mirando a più piattaforme e ti aspetti una piena reattività, allora devi davvero fare molta personalizzazione nei ganci forniti dagli autori di framework.
Questo tutorial rappresenta un capitolo di Bootstrap 3 in modo succinto, un eBook gratuito del team di Syncfusion.
