Penggunaan viewport dalam kemahiran tutorial html5 development_html5

Dengan populariti telefon mudah alih mewah (Andriod, Iphone, Ipod, WinPhone, dll.), pembangunan aplikasi Internet mudah alih telah menarik lebih banyak perhatian Menggunakan html5 untuk membangunkan aplikasi mudah alih adalah pilihan terbaik. Walau bagaimanapun, setiap telefon bimbit mempunyai resolusi dan saiz skrin yang berbeza Bagaimana kita boleh menjadikan aplikasi atau saiz halaman yang kita bangunkan sesuai untuk pelbagai telefon bimbit mewah? Mempelajari penggunaan html5 viewport boleh membantu anda melakukan ini... Pengenalan kepada sintaks viewport:

Salin kod Kodnya adalah seperti berikut: content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , skala awal = nilai_apung , skala minimum = nilai_apung , skala maksimum = nilai_apung , boleh skala pengguna = [ya | tidak] , kepadatan-sasarandpi = [nilai_dpi |. dpi |. tinggi -dpi |. sederhana-dpi |. lebar Kawal saiz port pandangan Anda boleh menentukan nilai atau nilai khas Sebagai contoh, lebar peranti ialah lebar peranti (unit ialah piksel CSS apabila menskalakan kepada 100%). tinggi

sepadan dengan lebar dan menentukan ketinggian. target-densitydpi

Ketumpatan piksel skrin ditentukan oleh resolusi skrin, biasanya ditakrifkan sebagai bilangan titik per inci (dpi). Android menyokong tiga ketumpatan piksel skrin: ketumpatan piksel rendah, ketumpatan piksel sederhana dan ketumpatan piksel tinggi. Skrin ketumpatan piksel rendah mempunyai lebih sedikit piksel per inci, manakala skrin ketumpatan piksel tinggi mempunyai lebih banyak piksel per inci. Pelayar Android dan skrin lalai WebView ialah kepadatan piksel sederhana. Berikut ialah julat nilai atribut target-densitydpi

device-dpi – Gunakan dpi asli peranti sebagai dp sasaran. Penskalaan lalai tidak berlaku. dpi tinggi – gunakan hdpi sebagai dpi sasaran. Ketumpatan piksel sederhana dan peranti ketumpatan piksel rendah mengecilkan mengikut kesesuaian.

dpi sederhana – Gunakan mdpi sebagai dpi sasaran. Peranti dengan ketumpatan piksel tinggi dinaikkan sewajarnya, dan peranti dengan ketumpatan piksel turunkan dengan sewajarnya. Ini ialah ketumpatan sasaran lalai rendah-dpi - Gunakan mdpi sebagai dpi sasaran. Peranti ketumpatan piksel sederhana dan ketumpatan piksel tinggi dinaikkan sewajarnya.

– Tentukan nilai dpi tertentu sebagai dpi sasaran.

Salin kod

Kod tersebut adalah seperti berikut:

Untuk menghalang Penyemak Imbas Android dan WebView daripada menskalakan halaman anda berdasarkan kepadatan piksel skrin yang berbeza, anda boleh menetapkan sasaran-ketumpatandpi port pandangan kepada dpi peranti. Apabila anda melakukan ini, halaman tidak akan berskala. Sebaliknya, halaman dipaparkan berdasarkan kepadatan piksel skrin semasa. Dalam kes ini, anda juga perlu mentakrifkan lebar port pandangan untuk sepadan dengan lebar peranti supaya halaman anda boleh muat pada skrin.

skala awal Skala awal. Iaitu, tahap zum awal halaman. Ini ialah nilai titik terapung yang merupakan pengganda saiz halaman. Contohnya, jika anda menetapkan penskalaan awal kepada "1.0", maka halaman web akan dipaparkan pada 1:1 daripada resolusi ketumpatan sasaran apabila dipaparkan. Jika anda menetapkannya kepada "2.0", maka halaman tersebut akan dibesarkan kepada 2 kali ganda.

skala maksimum Skala maksimum. Iaitu, tahap penskalaan maksimum yang dibenarkan. Ini juga merupakan nilai titik terapung yang menunjukkan pengganda maksimum saiz halaman berbanding saiz skrin. Contohnya, jika anda menetapkan nilai ini kepada "2.0", maka halaman boleh dibesarkan sehingga 2 kali ganda berbanding saiz sasaran.

skala pengguna Skala boleh skala pengguna. Iaitu, sama ada pengguna boleh menukar tahap zum halaman. Jika ditetapkan kepada ya, pengguna dibenarkan menukarnya, jika tidak, ia adalah tidak. Nilai lalai ialah ya. Jika anda menetapkannya kepada tidak, kedua-dua skala minimum dan skala maksimum akan diabaikan, kerana penskalaan tidak boleh dilakukan sama sekali.

Semua nilai penskalaan mestilah dalam julat 0.01–10.

Contoh:

(Tetapkan lebar skrin kepada lebar peranti dan larang pengguna daripada melaraskan zum secara manual)

(Tetapkan ketumpatan skrin kepada frekuensi tinggi, frekuensi sederhana dan frekuensi rendah untuk skala secara automatik dan larang pengguna daripada melaraskan penskalaan secara manual)