Pembangunan aplikasi mudah alih

Saya ingin bercakap tentang apakah rangsangan fon dalam penyemak imbas mudah alih, masalah tidak dijangka yang boleh menyebabkannya dalam pembangunan web, dan cara menangani masalah ini.

Mari kita lihat contoh kehidupan sebenar:

Contoh 1:

Terdapat elemen yang baru dibuat dengan paparan: inline-block .

Mari kita ukur lebarnya menggunakan sifat offsetWidth.

Jom tukar warnanya.

Dan, tiba-tiba, dalam Google Chrome untuk Mudah Alih, selepas perubahan warna lebar elemen meningkat dengan mendadak, tidak lagi sepadan dengan apa yang diukur hanya dua baris di atas!

Tunjukkan kod

window.onload = fungsi () ( var spnSpan1 = document.getElementById("span-1"); alert("Lebar elemen sebelum perubahan warna: "+ spnSpan1.offsetWidth +"px"); //59px spnSpan1.style.color = "merah"; makluman ("Lebar elemen selepas perubahan warna: "+ spnSpan1.offsetWidth +"px"); //186px (WTF?!) )

unsur

Lihat contoh dalam talian.

(Untuk melihat contoh dalam artikel ini, gunakan Google Chrome untuk Mudah Alih atau Google Chrome biasa dalam mod emulasi telefon pintar, seperti Apple iPhone 5 atau Samsung Galaxy Note II.)

Mengapa perubahan warna unsur membawa kepada peningkatan di dalamnya saiz?! Sebab untuk tingkah laku pelik ini adalah peningkatan fon dengan tepat. Apakah itu fon boosting Font boosting ialah teknik khas dengan mana penyemak imbas mudah alih melaraskan saiz fon kepada resolusi peranti mudah alih. Teknik ini diperlukan kerana banyak halaman web yang direka untuk pelayar desktop mengandungi elemen teks yang lebarnya melebihi lebar skrin mudah alih. Untuk melihat elemen ini, pelawat terpaksa sama ada menggunakan tatal mendatar atau menyesuaikan elemen ke dalam saiz skrin dengan mengurangkan skala halaman. Walau bagaimanapun, apabila skala berkurangan, saiz fon juga berkurangan, menjadikan teks kadangkala tidak boleh dibaca sepenuhnya. Jadi, penggalak fon secara khusus meningkatkan saiz fon, supaya selepas memasang blok ke dalam lebar skrin, saiz fon ini sepadan dengan yang dimaksudkan pada asalnya.

Tahap peningkatan saiz fon semasa but fon bergantung pada lebar elemen - lebih lebar elemen, lebih banyak ia mesti dikecilkan agar sesuai dengan saiz skrin, dan, dengan itu, lebih banyak saiz fon mesti ditingkatkan untuk mengimbangi untuk pengurangan ini.

Masalah dengan peningkatan fon Pelaksanaan peningkatan fon dalam Google Chrome untuk Mudah Alih mempunyai dua ciri yang boleh membawa kepada ralat yang sukar dikesan dalam pembangunan web:

Peningkatan fon elemen tidak berlaku serta-merta selepas penciptaannya, tetapi selepas "lukisan semula" (aliran semula) halaman seterusnya. Sebaliknya, aliran semula, seperti yang diketahui, berlaku selepas halaman dimuatkan, selepas skrip mengubah suai halaman selesai, dan juga apabila mengakses sifat yang berkaitan dengan geometri halaman, contohnya offsetWidth .

Peningkatan fon elemen dengan paparan: blok sebaris berlaku bukan sahaja selepas aliran semula halaman, tetapi selepas aliran semula dan perubahan dalam beberapa harta elemen itu sendiri (contohnya, warna).

Mari kita gambarkan ciri ini dengan contoh: Contoh 2:

Terdapat 4 elemen, tiga yang pertama mempunyai paparan: set blok sebaris, dan yang ke-4 tidak. Akibatnya, saiz elemen ke-4 meningkat serta-merta selepas halaman dimuatkan, dan saiz elemen 1–3 meningkat hanya selepas warnanya berubah.

Tunjukkan kod

Masalah dengan peningkatan Font dalam Google Chrome untuk Tetingkap Mudah Alih.onload = function () ( /* Elemen yang baru dicipta */ var spnSpan1 = document.getElementById ("span-1"); var spnSpan2 = document.getElementById ("span-2" ); var spnSpan3 = document.getElementById ("span-3"); var btnGo = document.getElementById ("btnGo"); /* Tukar warna elemen dan saiznya tiba-tiba meningkat */ btnGo.onclick = fungsi () ( spnSpan1 .style.color = "merah"; spnSpan2.style.color = "merah"; spnSpan3.style.color = "merah"; )

Elemen 1

Elemen 2

Elemen 3

Elemen 4

abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

Lihat contoh dalam talian.

Mengetahui ciri ini, anda boleh memahami sebab kelakuan aneh Google Chrome untuk Mudah Alih dalam Contoh 1:

Apabila kita mengukur offsetWidth bagi elemen yang baru dicipta, kita mendapat nilai sebelum meningkatkan fon.

Pada masa yang sama, ukuran ini mengaktifkan aliran semula halaman.

Akhirnya, menukar warna elemen mencetuskan peningkatan fon padanya, dan saiz fon meningkat. Dan apabila saiz fon meningkat, offsetWidth juga meningkat, menjadi ketara lebih besar daripada apa yang diukur dua baris di atas.

Apa nak buat? Terdapat dua cara untuk mengelakkan lonjakan saiz fon seperti ini: Kaedah 1 - lumpuhkan peningkatan fon. Untuk melakukan ini, anda perlu menetapkan lebar halaman web (atau, lebih tepat lagi, lebar port pandangannya) sama dengan lebar skrin, sambil menambah teg:

Akibatnya, pengurangan lanjut skala halaman akan menjadi mustahil, dan peningkatan fon, yang direka untuk mengimbangi pengurangan ini, tidak akan bermula secara semula jadi.

Contoh 3

Tunjukkan kod

Penyelesaian #1 kepada masalah peningkatan Font dalam Google Chrome untuk Mudah Alih window.onload = function () ( var spnSpan1 = document.getElementById ("span-1"); /* Akibatnya, peningkatan fon tidak akan berlaku dan saiz elemen apabila menukar warna tidak akan berubah. */ makluman ("Lebar elemen sebelum perubahan warna: "+ spnSpan1.offsetWidth +"px"); //186px spnSpan1.style.color = "red"; alert (" Lebar elemen selepas perubahan warna: " + spnSpan1.offsetWidth +"px"); //186px )

unsur

abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

Lihat contoh dalam talian.

Walau bagaimanapun, kaedah ini tidak selalu terpakai, terutamanya jika kami sedang membangunkan perpustakaan javascript dan tidak mempunyai kawalan penuh ke atas halaman akhir. Kaedah 2 ialah memaksa peningkatan fon serta-merta selepas mencipta elemen. Untuk melakukan ini anda perlukan:

Aliran semula halaman panggilan. Untuk memanggil reflow anda boleh, sebagai contoh, mengukur document.body.offsetWidth .

Jika elemen mempunyai paparan: inline-block , kemudian tukar juga warnanya dan kemudian tukar semula.

Akibatnya, apabila kita mula menjalankan beberapa tindakan yang bermakna dengan elemen, lompatan dalam saiz fon sudah pun berlaku dan tidak akan mengganggu kita. Contoh 4

Tunjukkan kod

Penyelesaian #2 kepada masalah peningkatan Font dalam Google Chrome untuk Mudah Alih window.onload = function () ( var spnSpan1 = document.getElementById ("span-1"); /* Kami mencetuskan peningkatan fon serta-merta selepas mencipta elemen. */ doReflow (); doFontBoosting (spnSpan1); /* Akibatnya, saiz fonnya tidak akan berubah pada masa hadapan. */ makluman ("Lebar elemen sebelum menukar warna: "+ spnSpan1.offsetWidth +"px") ; //186px spnSpan1.style.color = "merah"; makluman ("Lebar elemen selepas perubahan warna: "+ spnSpan1.offsetWidth +"px"); //186px ) fungsi doReflow () ( document.body.offsetWidth; ) fungsi doFontBoosting (elElement) ( var strColor = elElement.style.color; elElement.style.color = (strColor == "merah" ? "biru" : "merah"); elElement.style.color = strColor; )

unsur

abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc

blok sebaris

aliran semula

Tambah tag

Google sentiasa menambah baik penyemak imbas mudah alih Google Chrome untuk Android, menambah ciri berguna padanya. Ramai pengguna tidak mengetahui fungsi tertentu yang akan menjadikan melayari Internet lebih mudah, lebih pantas dan lebih mudah.

Penting: Sesetengah ciri mungkin tidak tersedia pada sesetengah telefon pintar kerana Chrome yang sudah lapuk (kami mengesyorkan anda mengemas kini melalui Google Play) atau versi OS.

1. Carian ringkas dari halaman

Selalunya berlaku bahawa semasa mencari maklumat yang diperlukan di Internet, anda datang ke tapak di mana terdapat apa yang anda perlukan, tetapi teks menggunakan istilah yang tidak jelas atau hanya mengandungi perkara yang belum anda temui sebelum ini. Biasanya, pengguna membuka tab baharu, memasukkan perkataan yang tidak diketahui ke dalam bar carian, mencarinya, kemudian kembali ke bahan utama. Tetapi proses ini boleh dibuat lebih mudah dan lebih cepat.

Dalam teks, kami mengusir perkataan/frasa yang tidak dikenali dan panel dengan carian Google muncul di bahagian bawah. Kami menariknya lebih tinggi, kami melihat hasil carian. Jangan ragu untuk mengikuti pautan, dan klik pada "Kembali" untuk kembali ke halaman tempat kami bermula.

2. Penskalaan paksa

Banyak tapak tidak membenarkan anda menggunakan fungsi zum. Sesetengah orang melakukan ini dengan sengaja, sesetengah sumber dihadkan oleh enjin mereka sendiri. Walau apa pun sebabnya, Chrome membenarkan anda memintas larangan ini. Pergi ke "Tetapan", "Kebolehaksesan", tandai kotak "Paksakan saiz semula".

Pada sesetengah tapak, walaupun dengan tetapan aktif, larangan itu tidak boleh dipintas. Contoh yang menarik ialah versi mudah alih Yandex.

3. Zum satu tangan

Kebanyakan pengguna, apabila mereka ingin membesarkan objek pada halaman, letakkan dua jari pada skrin dan kemudian bentangkannya ke arah yang berbeza. Ini hanya boleh dilakukan apabila menggunakan dua tangan, dan saiz paparan tidak penting. Tetapi ada alternatif yang akan sangat dihargai oleh pengguna telefon pintar besar.

Untuk mengezum masuk, hanya sentuh skrin sekali, angkat jari anda dan letakkan semula dengan cepat, kemudian luncurkan ke atas dan ke bawah skrin. Tidak perlu tangan terpakai! Jangan lupa tentang pelarasan pintar kandungan pada saiz paparan dengan mengetik dua kali - berkesan apabila blok tidak bermaklumat muncul di kiri dan kanan, dan teks terletak betul-betul di tengah.

Kaedah zum masuk/keluar ini adalah sistemik, yang bermaksud ia berfungsi dalam beberapa program lain, contohnya, Peta Google

4. Tukar antara tab dengan cepat

Pengguna penyemak imbas mudah alih sentiasa menghadapi masalah yang sama seperti dalam klien desktop - dengan sekumpulan tab terbuka. Dan jika teg tapak dipaparkan pada komputer dan tablet, pada telefon pintar anda perlu menggunakan butang "Tab". Tetapi dalam Chrome anda boleh melakukannya tanpa ini; hanya leret dari kiri ke kanan atau kanan ke kiri merentas alamat atau medan input pertanyaan carian untuk beralih ke tab bersebelahan!

Jika anda perlu bergerak lebih jauh daripada satu atau dua tab, anda masih tidak perlu mengklik pada butang berasingan - hanya leret ke bawah bar carian untuk pergi ke menu tab terbuka. Dan jika anda meleret salah satu tab dari kanan ke kiri, anda boleh menutupnya serta-merta, tetapi anda tidak boleh menjimatkan masa di sini, kerana setiap satu daripadanya mempunyai salib kecil untuk melakukan tindakan yang sama.

5. Tutup semua tab

Selalunya berlaku bahawa dalam tergesa-gesa melayari web, berpuluh-puluh tab akhirnya dibuka dalam penyemak imbas. Jika anda pasti bahawa tiada apa-apa yang penting di sana, anda boleh menutup semuanya sekaligus. Untuk melakukan ini, pergi ke senarai tapak terbuka menggunakan mana-mana kaedah yang mudah, klik tiga titik, klik pada item "Tutup semua tab".

6. Navigasi menu pantas

Meleret dalam Chrome digunakan hampir di mana-mana. Sebagai contoh, anda tidak perlu mengklik pada tiga titik untuk pergi ke menu, hanya letakkan jari anda padanya dan leret ke bawah. Walaupun pada pandangan pertama isyarat ini kelihatan tidak berguna, apabila anda membiasakan diri dengan susunan item dalam menu ini, anda boleh beralih kepada fungsi individu tanpa berfikir sama sekali. Jadi, sebagai contoh, adalah berkesan untuk beralih kepada versi "desktop" tapak.

7. Faedah menu

Sesetengah ciri penyemak imbas ada di permukaan, tetapi kami tidak mengingatinya apabila ia diperlukan. Khususnya, menu menawarkan pilihan seperti "Cari di Halaman" (cari teks khusus pada tapak yang anda lihat), "Tab Terkini" (tapak yang dilihat baru-baru ini tetapi telah ditutup) dan "Tambah ke Skrin Utama" - yang terakhir mencipta pautan ke halaman yang dipilih terus pada desktop.

Mudah untuk kes apabila anda melawati tapak yang sama secara sistematik, yang mana anda perlu melalui beberapa tahap perendaman untuk mencapai matlamat. Ini biasanya berlaku dengan kadar pertukaran atau cuaca (sudah tentu, terdapat aplikasi khusus, tetapi ia mengambil ruang dalam memori peranti).

8. Penjimatan trafik

Dalam tetapan terdapat juga fungsi "Penjimatan Trafik", yang memampatkan kandungan sebelum memuat turun ke telefon pintar. Oleh itu, tapak dimuatkan dengan lebih cepat dan jumlah trafik yang digunakan dikurangkan. Sila ambil perhatian bahawa ciri ini tidak berfungsi dengan tapak yang alamatnya bermula dengan https. Dengan penggunaan Internet biasa, penjimatan berkisar antara 20-40% daripada trafik, bergantung pada sumber yang dilawati.

9. Guru

Google sedang menjalankan beberapa cabang pembangunan untuk penyemak imbas Chrome; jika anda ingin mencuba ciri baharu sebelum yang lain, maka anda harus beralih kepada versi Beta. Walaupun cawangan ini berfungsi dengan stabil, jangan lupa bahawa Google tidak menjamin kualiti kerja yang sama seperti dalam kes versi arus perdana penyemak imbas.

Tidak kira versi yang dipilih, pengguna mungkin mempunyai akses kepada beberapa ciri yang dilumpuhkan secara lalai. Untuk melakukan ini, masukkan dalam bar carian:

Halaman dibuka dengan senarai panjang ciri percubaan; jika anda memilih Chrome Beta, maka akan terdapat lebih banyak suis dalam senarai ini. Perlu diingat bahawa beberapa fungsi di sini berfungsi dengan sangat buruk, dan oleh itu, selepas mengaktifkannya, segera semak fungsinya di beberapa tempat supaya penyemak imbas tidak "jatuh" pada saat yang paling tidak sesuai kemudian.

Kebanyakan ciri tidak akan menarik minat pengguna massa, tetapi anda benar-benar boleh melaraskan pengalaman pengguna anda secara terperinci (termasuk melumpuhkan beberapa fungsi, contohnya, muat semula automatik halaman).

10. Simpan halaman

Google Chrome membolehkan anda menyimpan halaman sebagai dokumen PDF pada telefon pintar anda, yang bukan sahaja membenarkan anda mengakses kandungan tanpa sambungan Internet, tetapi juga merekodkan keadaan semasa halaman tersebut (anda tidak tahu mengapa anda memerlukannya) . Untuk melakukan ini, pilih "Cetak" dari menu, dan kemudian klik "Simpan sebagai PDF". sedia.

Bonus

Satu lagi ciri Chrome ialah pengurus fail terbina dalam. Untuk mengaksesnya, masukkan dalam bar alamat:

Pengurus tidak boleh dipanggil sangat mudah atau sangat berfungsi, tetapi kehadirannya, sekali lagi, akan membolehkan kebanyakan pengguna untuk tidak memasang program berasingan untuk memenuhi keperluan asas. Ingat point 7, pengurus fail ini juga boleh diletakkan pada desktop anda!

Sudah tentu, Chrome juga mempunyai ciri seperti menyegerakkan tab dengan peranti lain yang menggunakan penyemak imbas ini, mod Inkognito dan lain-lain. Adakah anda fikir kami telah mengabaikan beberapa fungsi secara tidak adil? Tulis mengenainya dalam komen!

Penyemak imbas dibina di atas asas kod projek Chromium percuma dan dibezakan dengan penggunaan logo Google, sokongan terbina dalam untuk Flash dan PDF, kehadiran sistem untuk menghantar pemberitahuan sekiranya berlaku ranap sistem, sistem untuk secara automatik memasang kemas kini dan menghantar parameter RLZ semasa mencari.

Perubahan besar dalam Google Chrome 37

• Sokongan untuk skrin resolusi tinggi (hiDPI);
• Sokongan untuk teknologi DirectWrite untuk mempercepat dan meningkatkan kualiti pemaparan fon pada platform Windows 7 dan Windows 8. Sebelum ini, output dijalankan melalui subsistem GDI (Antara Muka Peranti Grafik), yang menimbulkan masalah apabila bekerja pada skrin resolusi sangat tinggi (sebenarnya, imej telah dijana dengan resolusi 1600x900 s penskalaan seterusnya kepada resolusi skrin sebenar);
• Sokongan untuk penskalaan fon subpiksel, membolehkan animasi lancar apabila menukar saiz fon;
• Menambah Slaid dan Helaian Google pada senarai aplikasi web yang ditawarkan secara lalai pada halaman program dan dalam pelancar Apl Chrome;
• Reka bentuk pengurus kata laluan telah diubah;
• Sokongan untuk teg HTML baharu "dialog", yang membolehkan anda membuat dan mengurus kotak dialog melalui API JavaScript (contoh);
• Koordinat TouchEvent kini diwakili oleh nombor dengan jenis berganda (sebelum ini panjang), yang membolehkan penjejakan sentuhan yang sangat sensitif pada skrin sentuh DPI tinggi;
• Mendayakan API JavaScript Kriptografi Web secara lalai, yang direka bentuk untuk melaksanakan operasi kriptografi asas di sisi aplikasi web, seperti memanipulasi cincang kriptografi, menjana dan mengesahkan tandatangan digital, mengekod dan menyahkod data menggunakan pelbagai kaedah penyulitan dan menjana rawak selamat secara kriptografi. nombor. API juga menyediakan fungsi untuk menjana dan mengurus kunci. Contoh penggunaan API Kriptografi Web termasuk menyediakan pengesahan, menggunakan tandatangan digital, memelihara integriti data, melaksanakan komunikasi yang disulitkan selain SSL/TLS;
• Parameter kursor sifat CSS - "zoom-in" dan "zoom-out" - telah dialih keluar daripada awalan -webkit-;
• Menambahkan objek navigator.hardwareConcurrency untuk mendapatkan data tentang bilangan teras CPU;
• Bahasa pilihan pengguna kini tersedia melalui objek navigator.languages. Apabila bahasa berubah, peristiwa pertukaran bahasa dijana;
• Fon monospace lalai pada platform Windows telah ditukar daripada Courier New kepada Consolas;
• Menambahkan modul Bentuk CSS, yang membolehkan anda mengatur pembalut teks di sekeliling sempadan bukan segi empat tepat;
• Memasuki fasa kedua terakhir penamatan pemalam NPAPI, yang memerlukan perubahan tetapan untuk mendayakan NPAPI pada platform Windows dan OS X (klik untuk mengaktifkan tidak lagi berfungsi). Pembuangan lengkap kod sokongan NPAPI untuk Windows dan OS X dijangka pada akhir tahun (sokongan NPAPI telah pun dihentikan dalam versi Linux);
• Sebilangan besar perubahan di bawah tudung bertujuan untuk mengoptimumkan prestasi dan meningkatkan kestabilan;
• Versi Chrome 37 untuk platform Android memperkenalkan proses yang dipermudahkan untuk menyertai akaun Google: jika anda log masuk ke akaun Chrome anda, maka log masuk ke akaun perkhidmatan web Google (Gmail, Peta, dll.) kini akan dilakukan secara automatik;
• Reka bentuk antara muka Chrome untuk platform Android telah dikemas kini, yang dibawa selaras dengan konsep Reka Bentuk Bahan;
• Chrome untuk platform mudah alih kini menyokong seni bina MIPS, X86-64 dan ARM64 untuk Android dan ARM64 untuk iOS.

Selain inovasi dan pembetulan pepijat, versi baharu menghapuskan 50 kelemahan. Gabungan dua kelemahan (CVE-2014-3176, CVE-2014-3177) telah diberikan status isu kritikal, yang membolehkan anda memintas semua peringkat perlindungan penyemak imbas dan melaksanakan kod pada sistem, di luar persekitaran kotak pasir. 25 kelemahan diberikan tahap keterukan yang tinggi. Sebagai sebahagian daripada program untuk membayar ganjaran tunai kerana menemui kelemahan untuk keluaran semasa, Google membayar 8 anugerah dalam jumlah $43,000 (satu anugerah $30,000, satu anugerah $4,000, tiga anugerah $2,000, satu anugerah $1,500, $1,000 dan 500 $).