Apa itu viewport
Browser seluler menempatkan halaman di jendela virtual (viewport). Biasanya, jendela virtual (viewport) lebih luas dari layar, sehingga setiap halaman web tidak harus memeras setiap halaman web ke jendela yang sangat kecil (ini akan menghancurkan tata letak halaman web yang tidak dioptimalkan untuk browser seluler). Pengguna dapat melihat berbagai bagian halaman web melalui panning dan zoom. Versi seluler Browser Safari baru -baru ini memperkenalkan tag meta viewport, yang memungkinkan pengembang web untuk mengontrol ukuran dan zoom viewport, dan browser seluler lainnya juga pada dasarnya mendukungnya.
Dasar -dasar Viewport
Tag meta viewport dari halaman yang umum digunakan yang dioptimalkan untuk halaman web seluler kira -kira sebagai berikut:
<meta name = viewport content = width = device-width, skala awal = 1, skala maksimum = 1 ″>
Lebar: Mengontrol ukuran viewport, yang dapat ditentukan jika 600, atau nilai khusus, seperti lebar perangkat, adalah lebar perangkat (unit piksel CSS ketika diskalakan hingga 100%.
Tinggi: sesuai dengan lebar, tentukan ketinggiannya.
Skala awal: Penskalaan awal, yaitu, rasio penskalaan ketika halaman dimuat untuk pertama kalinya.
Skala maksimum: Skala maksimum yang memungkinkan skala pengguna.
Skala minimum: Skala minimum yang memungkinkan skala pengguna.
skala skala pengguna: dapat skala pengguna secara manual
Beberapa pertanyaan tentang viewport
Viewport bukan hanya atribut unik di iOS, tetapi juga viewport di Android dan WinPhone. Masalah yang ingin mereka selesaikan adalah sama, yaitu, mengabaikan resolusi nyata dari perangkat dan langsung melalui DPI, mengatur ulang resolusi antara ukuran fisik dan browser, yang tidak ada hubungannya dengan resolusi perangkat. Misalnya, Anda bisa mendapatkan iPhone3 GS dengan 3,5 inci-320 * 480, iPhone4 dengan 3,5 inci-640 * 960, iPhone4 dengan 9,7 inci-1024 * 768, dan iPad2 dengan resolusi dan ukuran fisik yang berbeda, Anda dapat mengatur viewport untuk membuatnya memiliki resolusi yang sama di browser. Misalnya, situs web Anda selebar 800px, Anda dapat mengatur lebar = 800 viewport untuk membuat situs web Anda menampilkan situs web Anda di tiga perangkat yang berbeda ini hanya layar penuh.
Saya percaya bahwa setiap siswa yang memiliki sedikit pemahaman tentang viewport seharusnya sudah memahami pengetahuan di atas. Ini bukan poin yang ingin saya bicarakan hari ini. Yang ingin saya ilustrasikan adalah beberapa perbedaan dalam kinerja viewport di iOS dan Android.
Saat mencari pengetahuan online tentang viewport, pada dasarnya semua informasi berikut:
<meta name = viewport content = width = device-width, skala awal = 1.0, skala maksimum = 1.0, skala minimum = 1.0, skala pengguna = tidak />
Kode ini berarti bahwa lebar viewport sama dengan resolusi nyata pada perangkat fisik dan tidak memungkinkan pengguna untuk skala. Beginilah aplikasi web utama di Yidu diatur. Fungsinya adalah dengan sengaja meninggalkan viewport dan tidak skala halaman. Dengan cara ini, DPI harus sama dengan resolusi nyata pada perangkat. Tanpa penskalaan, halaman web akan tampak lebih tinggi dan lebih halus. Siswa yang bermain PS harus tahu apa nantinya ketika Anda memperbesar gambar 1000 * 1000 langsung ke 500 * 500 poin, kan? Distorsi gambar tidak boleh melarikan diri.
Tetapi aplikasi yang ingin saya lakukan adalah sebaliknya, dan perlu menggunakan viewport dan zoom. Tidak peduli apa resolusi sebenarnya atau apa ukuran fisiknya, saya harap akan ada resolusi terpadu di browser, dan bahwa pengguna tidak akan diizinkan untuk memperbesar. Perangkat yang saya uji adalah: iPhone4, iPad2, HTC G11, AQUOS Phone (sistem Android), Asus Android Pad, Dell Winphone, dan saya mengalami masalah berikut di sepanjang jalan:
1) Jika viewport diatur tanpa tampilan, maka lebar default adalah 980. Jika semua elemen halaman kurang dari 980, maka lebar adalah 980. Jika lebar halaman melebihi 980, maka lebar sama dengan lebar maksimum. Singkatnya, seluruh halaman dapat ditampilkan dari kiri ke kanan secara default. Jika Anda mengatur viewport, misalnya, cukup atur user-scalable = no, misalnya <meta name = viewport content = user-scalable = no />, maka lebar di bawah iOS masih akan ditampilkan pada 980 (yaitu, itu akan diskalakan dengan DPI secara default), tetapi tidak akan disesalkan di bawah dan winphone yang sama.
2) Untuk perangkat iOS, pengaturan lebar dapat berlaku, tetapi untuk Android, pengaturan lebar tidak akan berlaku. Rasio penskalaan DPI secara otomatis dihitung dengan lebar yang Anda tetapkan dan resolusi nyata yang Anda atur. Namun, di Android, Anda mengatur lebar tidak valid. Apa yang dapat Anda tetapkan adalah bidang-densityDPI bidang khusus, yaitu, ada tiga variabel: lebar browser, lebar perangkat nyata, dan DPI. Mari kita gunakan formula untuk mengekspresikan hubungan di antara mereka (bukan hubungan nyata, cukup gunakan untuk penjelasan singkat) Perangkat NYATA Lebar * dpi = lebar browser, di sini tiga variabel, lebar perangkat nyata adalah nilai yang diketahui yang tidak dapat kita operasikan, dan kita dapat mengatur salah satu variabel lain untuk mempengaruhi yang lain. Di iOS, yang dapat kita ubah adalah lebar browser, DPI secara otomatis dihasilkan, dan di Android, yang dapat kita ubah adalah DPI, dan lebar browser secara otomatis dihasilkan. Untuk Android, tidak peduli bagaimana kami menetapkan lebar, itu tidak akan berdampak pada lebar browser.
PS: Di sini saya akan berbicara tentang masalah aneh lain: Di HTC's G11 (saya hanya punya yang ini untuk ponsel HTC, dan tidak ada tes lain), jika DPI diatur tanpa menampilkan lebar, skala pengguna = tidak tidak berlaku, yaitu: <meta name = viewport content = target-densityDpi = 300, skala pengguna = no /> Kita perlu mengatur nilai lebar dapat ditampilkan. Meskipun nilai ini tidak berdampak pada resolusi layar browser di bawah Android (masih akan berdampak pada iOS), kita masih perlu mengaturnya, dan nilai ini harus lebih besar dari 320. Jika kurang dari atau sama dengan 320, skala pengguna = tidak tidak dapat efektif. Masalah ini hanya muncul di ponsel G11 HTC, dan tidak ada masalah seperti itu di telepon Aquos. Kompatibel dengan Android benar -benar sakit kepala @_ @. Saya tidak tahu berapa banyak jebakan di masa depan. Di WinPhone, hasilnya bahkan lebih aneh: Saya menetapkan nilai lebih besar dari 480 untuk lebar viewport, dan skala pengguna = tidak akan gagal. Jika nilai kurang dari 480, skala pengguna = tidak akan berlaku. Tetapi tidak peduli berapa banyak nilai saya mengatur lebar viewport, itu tidak memiliki efek pada lebar nyata yang ditampilkan oleh winphone, juga tidak memiliki efek melalui target-densityDPI. Setel lebar, jika kurang dari 480, layar akan memperkecil, tetapi skala reduksi sama sekali berbeda dari yang saya harapkan. Saya tidak tahu apa aturannya diperbesar. Saya tidak tahu apakah ini masalah dengan winphone atau masalah dengan implementasi Dell.
3) Artikel ini harus berhubungan langsung dengan artikel sebelumnya: Ketika perangkat iOS horizontal dan vertikal, secara otomatis akan menyesuaikan DPI. Apakah itu horizontal atau vertikal, ia dapat memastikan bahwa lebar browser sama dengan nilai yang ditetapkan dalam viewport. Oleh karena itu, ketika layar horizontal dan vertikal adalah layar horizontal dan vertikal, ukuran konten yang ditampilkan pada halaman akan secara otomatis mengukur dan berubah. Ketika ponsel android adalah layar horizontal dan vertikal, DPI tidak akan diubah, dan ketika layar horizontal dan vertikal, halaman web tidak akan diperbesar. Untuk alasan ini, iOS dapat memastikan bahwa tidak ada bilah gulir yang dihasilkan pada halaman horizontal dan vertikal, dan layar penuh ditampilkan, tetapi Android tidak dapat menjamin ini. Jika layar horizontal dan vertikal tidak diperbolehkan penuh, dan sebaliknya.
4) Untuk perangkat iOS, jika tampilan lebar ditentukan dan posisi terluas dari halaman melebihi lebar, lebar tidak valid dan masih akan ditampilkan pada lebar terluas (tidak akan ada bilah gulir). Tetapi masalah yang sangat aneh akan terjadi saat ini. Setelah Anda mengganti layar horizontal dan vertikal ponsel Anda beberapa kali, Anda akan menemukan bahwa halaman Anda telah diperbesar secara otomatis dan bilah gulir muncul, tetapi pada kenyataannya, lebar yang diperbesar tidak ada hubungannya dengan lebar yang Anda atur. Untuk mencegah hal ini terjadi, Anda perlu mengatur lebar lebar menjadi lebih besar dari bagian terluas dari halaman, atau sama.