Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)
Ketika meneliti untuk seri ini, saya menjumpai sejumlah potensi masalah, semua yang akan menyebabkan Anda sedikit bersedih—baik dengan transisi v2 ke v3, atau bahkan ketika hanya melompat langsung ke v3.
Beberapa hal berikut ini berlaku untuk v2 juga, tetapi secara umum saya memasukan mereka di sini karena mereka sedikit mengganggu saya dan menyebabkan saya menggaruk-garuk kepala dalam banyak kasus.
Mode Kompatibilitas Mundur Internet Explorer
Satu ini menyakitkan, sangat menyakitkan. Untuk sekitar satu setengah minggu, saya hanya berputar-putar, mencoba untuk mencari tahu mengapa layout yang saya buat dengan baik tidak tampilkan seperti yang diharapkan di versi terbaru dari IE11.
Ternyata saya memiliki kecacatan perangkat tag meta.
Seperti yang mungkin Anda ingat dari buku BS2, ada template dasar yang dianjurkan sebagai titik awal untuk semua situs berdasarkan kerangka Bootstrap. Tampak seperti ini:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> |
5 |
<meta charset="utf-8" /> |
6 |
<title>My Site</title> |
7 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
8 |
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> |
9 |
</head>
|
10 |
<body>
|
11 |
|
12 |
<!-- document code goes here -->
|
13 |
<script src="js/jquery-2.0.2.js" type="text/javascript"></script> |
14 |
<script src="js/bootstrap.js" type="text/javascript"></script> |
15 |
|
16 |
</body>
|
17 |
</html>
|
Jika Anda melihat dalam tag meta di dalam elemen head, Anda akan melihat bahwa kita memiliki key kompatibilitas di sana untuk memungkinkan mesin render IE modern mengetahui apa yang didukung dan yang tidak ketika mencoba untuk me-render semua hal dengan cara kompatibel mundur.
Dalam BS3, semua ini tidak bekerja dengan benar. Sebaliknya, metode yang direkomendasikan adalah menghapus semua kunci content type Anda, meninggalkan hanya IE=EDGE, dan bukan yang lain.
Cara terbaik untuk melakukan ini adalah membuat tata letak yang bekerja sempurna dalam cara standar HTML5, mencakup berbagai versi, kemudian memaksa semua debugger IE untuk mengadopsi versi tertentu, atau melakukan sesuatu ke sumber dokumen yang akan memaksa IE untuk mencoba me-render konten dengan cara seperti di bawah IE9 atau sebelumnya.
Berulang kali, saya memandangi tag meta, tidak menyadarinya bahwa itu adalah penyebab masalah saya. Jadi jika Anda mendapatkan kesalahan render aneh di IE11, silahkan lihat di debugger dan lihat modus IE apa yang harus ditampilkan halaman Anda di.
Internet Explorer 10 Viewport Perangkat
Ya semuanya, masalah lain yang berhubungan dengan IE. IE10 tidak bisa membedakan antara device width dan viewport width; hasilnya adalah bahwa IE10 manghasilkan CSS media queries-nya salah sepanjang waktu (tidak hanya di Bootstrap, tetapi kerangka lain juga). Perbaikan ini cukup sederhana: tambahkan aturan CSS dummy pada semua style CSS situs Anda yang terlihat seperti ini:
1 |
@-ms-viewport { width: device-width; } |
Itu umumnya memperbaiki hal-hal, kecuali dalam satu kasus. Dengan Windows Phone versi lebih awal dari Update 3, perangkatnya tidak akan menafsirkan hal-hal dengan benar dan menempatkan halaman ke tampilan desktop. Untuk memperbaiki ini, aturan-aturan CSS berikut dan kode JavaScript yang dibutuhkan:
1 |
@-webkit-viewport { width: device-width; } |
2 |
@-moz-viewport { width: device-width; } |
3 |
@-ms-viewport { width: device-width; } |
4 |
@-o-viewport { width: device-width; } |
5 |
@viewport { width: device-width; } |
1 |
“if (navigator.userAgent.match(/IEMobile\/10\.0/)) |
2 |
{
|
3 |
var msViewportStyle = |
4 |
document.createElement('style') msViewportStyle |
5 |
.appendChild( |
6 |
document.createTextNode( '@-ms-viewport{width:auto!important}' ) ) |
7 |
document.querySelector('head').appendChild(msViewportStyle) |
8 |
}” |
Saya tidak bisa mengambil kredit untuk memperbaiki ini bagaimanapun juga—itu jelas dirinci dalam dokumentasi online BS3. Ada juga informasi lebih lanjut pada subjek di dalam pedoman pengembang Windows 8.
Pembulatan Persen Safari
Dalam beberapa versi Safari, mesin render berkutat dengan jumlah desimal dalam nilai-nilai persentase.
Persentase ini sering digunakan dalamclass grid col-*-1, dan sebagai hasilnya, Anda akan melihat kesalahan dalam render layout 12-kolom saat ini ditemui.
Ada bug yang terbuka di sistem laporan bug BS3, tetapi ada sedikit yang bisa mereka lakukan untuk mengatasinya. Dokumentasi BS3 menyarankan mencoba untuk menambah pull-right ke kolom terakhir Anda, tapi jalan terbaik dari resolusi tampaknya adalah manual tweak dari nilai-nilai berbasis persentase Anda sampai keseimbangan ditemukan.
Browser Bawaan Android
Pada waktu ini, Android versi 4.1 dan di atasnya diedarkan dengan app "Browser" sebagai browser bawaan. BS3 (dan lainnya) gagal untuk me-render dengan benar di Browser karena banyaknya masalah dalam kode dasar browser, dan lagi di mesin CSS ada sejumlah besar masalah yang diketahui.
Ada solusi berbasis JavaScript untuk menambal layout Anda di dokumentasi BS3, tetapi sebaliknya resolusi terbaik bagi pengguna adalah menggunakan app Chrome, yang pada umumnya merupakan browser yang jauh lebih baik dan lebih stabil untuk Android.
Dan Sisanya?
Ada beberapa hal untuk disadari, dan sekali lagi, sebagian besar sudah didokumentasikan di dokumentasi BS3 dan menutupi hal-hal seperti zoom berbasis pinch, keyboard virtual dan bagaimana jenis pandangan bereaksi dimana bersangkutan dengan media query.
Pada kenyataannya, scan cepat dari masalah yang paling umum di Stack Overflow memberitahu kita bahwa sebagian banyak masalah berputar di sekitar bergulir, mengubah ukuran, zoom, dan masalah umum layar sentuh yang tampaknya berasal dari hal-hal baik yang terlalu kecil, atau tidak menjadi cukup sensitif untuk ukuran jari rata-rata.
Banyak masalah ukuran ini dapat diatasi dengan men-download distribusi sumber BS3 dan mengubah variabel Less dan mixins yang tersedia, atau dengan menyesuaikan hal-hal menggunakan alat-alat penyesuaian yang tersedia; sekarang bukan lagi ide yang baik untuk hanya men-download dan menggunakan BS3 kecuali Anda hanya menargetkan aplikasi desktop.
Jika Anda menargetkan beberapa platform dan mengharapkan responsif penuh, maka Anda benar-benar perlu untuk melakukan banyak kustomisasi di kaitan yang disediakan oleh penulis kerangka.
Tutorial ini merupakan sebuah bab dari Bootstrap 3 Singkat, eBook gratis dari tim di Syncfusion.
