Browser seluler biasanya membuat halaman di jendela virtual yang lebih lebar dari layar. Jendela virtual ini adalah viewport. Tujuannya adalah untuk menampilkan halaman web yang tidak disesuaikan dengan terminal seluler secara normal, sehingga mereka dapat sepenuhnya ditampilkan kepada pengguna. Kadang -kadang ketika kita menggunakan perangkat seluler untuk mengakses halaman web desktop, kita akan melihat bilah gulir horizontal, dan lebar area tampilan di sini adalah lebar viewport.
Secara teratur, jika halaman dapat diskalakan, gunakan kode berikut
<meta name = viewport content = width = device-width, skala awal = 1 />
Jika Anda tidak ingin memperbesar, gunakan kode berikut
2. Perbedaan antara piksel dan piksel perangkat di CSS<meta name = viewport content = width = perangkat-lebar, skala awal = 1.0, skala minimum = 1.0, skala maksimum = 1.0, skala pengguna = tidak>
Saat mengembangkan halaman web desktop, 1px di CSS adalah 1px pada perangkat; Namun, 1px dalam CSS hanyalah nilai abstrak, yang tidak mewakili piksel yang sebenarnya; Sementara di perangkat seluler, kepadatan piksel dari perangkat yang berbeda berbeda, dan 1px dalam CSS mungkin tidak sama dengan nilai piksel perangkat nyata. Penskalaan pengguna juga akan mengubah berapa banyak piksel perangkat 1px di CSS mewakili. Rasio ini adalah devicepixelratio
Piksel fisik/piksel independen = devicepixelratio
Kita dapat memperbesar di browser dan mencetak jendela. Piksel independen di dalamnya dapat dipahami sebagai PX di CSS.
3. Dasar -dasar ViewportKode:
<meta name = viewport content = width = device-width, skala awal = 1, skala maksimum = 1>
Berikut ini adalah beberapa properti viewport. Properti ini dapat digunakan secara campuran. Beberapa properti harus dipisahkan oleh koma secara bersamaan. Di sini kami memperluas konsep yang disebut Ideal Viewport, yang mengacu pada viewport dalam keadaan ideal. Ini dapat melihat semua konten halaman web secara normal tanpa penskalaan pengguna dan bilah gulir horizontal, dan dapat melihat semua teks dengan jelas. Tidak peduli seberapa kecil teks ini didefinisikan dalam CSS, dapat dilihat dengan jelas saat ditampilkan.
| milik | menggambarkan |
|---|---|
| lebar | Mengontrol lebar viewport, Anda dapat menentukan angka; atau atur lebar perangkat untuk menentukan |
| tinggi | Kontrol ketinggian viewport. Properti ini tidak terlalu penting dan jarang digunakan. |
| skala awal | Kontrol level zoom di bawah IdealViewport ketika halaman awalnya dimuat, biasanya diatur ke 1, yang bisa menjadi desimal |
| skala maksimum | Memungkinkan nilai penskalaan maksimum pengguna menjadi angka dan bisa desimal |
| Skala minimum | Memungkinkan nilai penskalaan minimum pengguna menjadi angka, yang dapat diambil dengan desimal. |
| skala pengguna | Apakah pengguna diizinkan untuk skala, nilainya tidak atau ya, tidak ada artinya tidak diizinkan, ya berarti izin |
1.width dan skala awal
Ketika lebar dan skala awal diatur, browser akan secara otomatis memilih nilai terbesar untuk adaptasi. Sebagai set:
<meta name = viewport konten = lebar = 400, skala awal = 1>
Browser akan memilih nilai besar untuk beradaptasi. Jika lebar viewport ideal jendela saat ini adalah 300 dan nilai skala awal adalah 1, nilai lebar 400 diperoleh; Jika viewport ideal dari jendela saat ini adalah 480, 480 dipilih.
Faktanya, lebar = perangkat lebar dan skala awal = 1 keduanya mewakili aplikasi viewport ideal, tetapi pada perangkat seluler seperti iPad dan iPhone dan IE, layar horizontal dan vertikal tidak dibedakan, dan lebar layar vertikal diambil secara default. Cara terbaik untuk menulis kompatibilitas adalah
<meta name = viewport content = width = device-width, skala awal = 1>
2. Atribut Ubah Dinamis
A. Document.write ()
document.write ('<meta name = viewport content = width = perangkat-lebar, skala awal = 1>')
b.setattribute
konsep viewportvar mvp = document.geteLementById ('testViewport');
mvp.setAttribute ('konten', 'lebar = 480');
Browser seluler biasanya membuat halaman di jendela virtual yang lebih lebar dari layar. Jendela virtual ini adalah viewport. Tujuannya adalah untuk menampilkan halaman web yang tidak disesuaikan dengan terminal seluler secara normal, sehingga mereka dapat sepenuhnya ditampilkan kepada pengguna. Kadang -kadang ketika kita menggunakan perangkat seluler untuk mengakses halaman web desktop, kita akan melihat bilah gulir horizontal, dan lebar area tampilan di sini adalah lebar viewport.
Perbedaan antara piksel dan piksel perangkat di CSSSaat mengembangkan halaman web desktop, 1px di CSS adalah 1px pada perangkat; Namun, 1px dalam CSS hanyalah nilai abstrak, yang tidak mewakili piksel yang sebenarnya; Sementara di perangkat seluler, kepadatan piksel dari perangkat yang berbeda berbeda, dan 1px dalam CSS mungkin tidak sama dengan nilai piksel perangkat nyata. Penskalaan pengguna juga akan mengubah berapa banyak piksel perangkat 1px di CSS mewakili. Rasio ini adalah devicepixelratio
Piksel fisik/piksel independen = devicepixelratio
Kita dapat memperbesar di browser dan mencetak jendela. Piksel independen di dalamnya dapat dipahami sebagai PX di CSS.
Dasar -dasar ViewportSitus yang dioptimalkan ponsel khas berisi konten yang mirip dengan yang berikut:
<meta name = viewport content = width = device-width, skala awal = 1, skala maksimum = 1>
Berikut ini adalah beberapa properti viewport. Properti ini dapat digunakan secara campuran. Beberapa properti harus dipisahkan oleh koma secara bersamaan. Di sini kami memperluas konsep yang disebut Ideal Viewport, yang mengacu pada viewport dalam keadaan ideal. Ini dapat melihat semua konten halaman web secara normal tanpa penskalaan pengguna dan bilah gulir horizontal, dan dapat melihat semua teks dengan jelas. Tidak peduli seberapa kecil teks ini didefinisikan dalam CSS, dapat dilihat dengan jelas saat ditampilkan.
| milik | menggambarkan |
|---|---|
| lebar | Mengontrol lebar viewport, Anda dapat menentukan angka; atau atur lebar perangkat untuk menentukan |
| tinggi | Kontrol ketinggian viewport. Properti ini tidak terlalu penting dan jarang digunakan. |
| skala awal | Kontrol level zoom di bawah IdealViewport ketika halaman awalnya dimuat, biasanya diatur ke 1, yang bisa menjadi desimal |
| skala maksimum | Memungkinkan nilai penskalaan maksimum pengguna menjadi angka dan bisa desimal |
| Skala minimum | Memungkinkan nilai penskalaan minimum pengguna menjadi angka, yang dapat diambil dengan desimal. |
| skala pengguna | Apakah pengguna diizinkan untuk skala, nilainya tidak atau ya, tidak ada artinya tidak diizinkan, ya berarti izin |
1.width dan skala awal
Ketika lebar dan skala awal diatur, browser akan secara otomatis memilih nilai terbesar untuk adaptasi. Sebagai set:
<meta name = viewport konten = lebar = 400, skala awal = 1>
Browser akan memilih nilai besar untuk beradaptasi. Jika lebar viewport ideal jendela saat ini adalah 300 dan nilai skala awal adalah 1, nilai lebar 400 diperoleh; Jika viewport ideal dari jendela saat ini adalah 480, 480 dipilih.
Faktanya, lebar = perangkat lebar dan skala awal = 1 keduanya mewakili aplikasi viewport ideal, tetapi pada perangkat seluler seperti iPad dan iPhone dan IE, layar horizontal dan vertikal tidak dibedakan, dan lebar layar vertikal diambil secara default. Cara terbaik untuk menulis kompatibilitas adalah
<meta name = viewport content = width = device-width, skala awal = 1>
2. Atribut Ubah Dinamis
A. Document.write ()
document.write ('<meta name = viewport content = width = perangkat-lebar, skala awal = 1>')
b.setattribute
var mvp = document.geteLementById ('testViewport');
mvp.setAttribute ('konten', 'lebar = 480');
Oke, artikel ini telah diperkenalkan kepada Anda. Anda dapat memilih sesuai dengan kebutuhan tes Anda sendiri. Secara umum, ponsel PC dan seluler dapat digunakan tanpa kemampuan beradaptasi dan tidak mendukung penskalaan. Jika Anda melompat ke ponsel, Anda dapat skala tanpa dampak.