Perihalan atribut meta viewport dalam halaman web html_HTML/Xhtml_Pengeluaran halaman web

Huraian atribut port pandangan meta HTML

Apa itu Viewport

Pelayar mudah alih meletakkan halaman dalam "tetingkap" maya (port pandangan) Biasanya "tetingkap" maya ini lebih luas daripada skrin, supaya setiap halaman web tidak perlu dihimpit ke dalam tetingkap kecil. Ini akan memecahkan reka letak halaman web yang tidak dioptimumkan untuk penyemak imbas mudah alih.) Pengguna boleh menyorot dan mengezum untuk melihat bahagian halaman web yang berbeza. Versi mudah alih penyemak imbas Safari baru-baru ini memperkenalkan teg meta port pandangan, yang membolehkan pembangun web mengawal saiz dan zum port pandangan Pelayar mudah alih lain juga pada asasnya menyokongnya.

Asas Viewport

Teg meta viewport yang biasa digunakan untuk halaman yang dioptimumkan untuk halaman web mudah alih adalah kira-kira seperti berikut:

lebar: Mengawal saiz port pandangan Anda boleh menentukan nilai, seperti 600, atau nilai khas, seperti lebar peranti, iaitu lebar peranti (unit ialah piksel CSS apabila dizum kepada 100%. ).
Ketinggian: Sepadan dengan lebar, nyatakan ketinggian.
skala awal: Nisbah penskalaan awal, iaitu nisbah penskalaan apabila halaman dimuatkan buat kali pertama.
skala maksimum: Skala maksimum yang dibenarkan untuk zum pengguna.
skala minimum: Skala minimum yang membolehkan pengguna mengezum.
boleh skala pengguna: sama ada pengguna boleh skala secara manual

Beberapa soalan tentang viewport

Viewport bukan sahaja atribut unik pada ios, terdapat juga viewport pada android dan winphone. Masalah yang ingin mereka selesaikan adalah sama, iaitu mengabaikan resolusi sebenar peranti dan menetapkan semula resolusi secara langsung antara saiz fizikal dan pelayar melalui dpi. Resolusi ini tidak ada kena mengena dengan resolusi peranti. Contohnya, jika anda mengambil iPhone 3 gs 3.5-inci-320*480, iPhone 4 3.5-inci-640*960 atau iPad 2 9.7-inci-1024*768, walaupun resolusi dan saiz fizikal peranti adalah berbeza, anda boleh menetapkan Port pandangan menjadikan mereka mempunyai resolusi yang sama dalam penyemak imbas. Sebagai contoh, jika tapak web anda adalah 800px lebar, anda boleh menetapkan lebar port pandangan kepada 800 untuk membolehkan tapak web anda dipaparkan sepenuhnya pada skrin pada tiga peranti berbeza ini.

Saya percaya setiap pelajar yang mempunyai sedikit pengetahuan tentang viewport sepatutnya sudah mengetahui ilmu di atas. Ini bukan fokus apa yang saya ingin katakan hari ini. Apa yang saya ingin terangkan ialah beberapa perbezaan dalam prestasi viewport pada ios dan android.

Mencari pengetahuan tentang viewport di Internet, pada asasnya semua maklumat adalah seperti berikut:

Maksud kod ini adalah untuk menjadikan lebar port pandangan sama dengan resolusi sebenar pada peranti fizikal dan tidak membenarkan pengguna mengezum. Semua apl web arus utama disediakan seperti ini dengan sengaja meninggalkan port pandangan dan tidak menskala halaman Dengan cara ini, dpi mesti sama dengan resolusi sebenar pada peranti kelihatan lebih tinggi. Pelajar yang bermain PS sepatutnya tahu bagaimana rupanya apabila anda terus menskalakan gambar 1000 * 1000 kepada 500 * 500 mata, bukan? Herotan gambar tidak dapat dielakkan.

Tetapi aplikasi yang saya ingin buat adalah sebaliknya. Ia perlu menggunakan viewport dan zum. Tidak kira apa resolusi sebenar, tidak kira apa saiz fizikalnya, saya mahu mempunyai resolusi seragam dalam pelayar dan tidak membenarkan pengguna mengezum. Peranti yang saya gunakan untuk ujian termasuk: iPhone 4, iPad 2, HTC G11, telefon Aquos pengeluar yang tidak diketahui (sistem Android), pad Android ASUS dan winphone Dell Kemudian saya menghadapi masalah berikut di sepanjang perjalanan:

1) Jika port pandangan tidak ditetapkan secara eksplisit, lebar lalai kepada 980. Jika lebar semua elemen pada halaman kurang daripada 980, lebarnya ialah 980. Jika kedudukan terluas halaman melebihi 980, maka lebarnya adalah sama dengan lebar maksimum. Ringkasnya, keseluruhan halaman boleh dipaparkan dari kiri ke kanan secara lalai. Jika viewport ditetapkan, sebagai contoh, user-scalable=no hanya ditetapkan, seperti , maka lebar masih akan dipaparkan sebagai 980 di bawah ios (iaitu. Secara lalai, ia akan diskalakan dengan dpi), tetapi ia tidak akan diskalakan lagi di bawah Android dan Winphone Resolusi penyemak imbas adalah konsisten dengan resolusi tetapan sebenar.

2) Untuk peranti ios, tetapan lebar boleh berkuat kuasa, tetapi untuk android, tetapan lebar tidak akan berkuat kuasa. Untuk peranti ios, nisbah penskalaan, iaitu, dpi, dikira secara automatik berdasarkan lebar yang anda tetapkan dan peleraian sebenar Pada Android, lebar yang anda tetapkan adalah tidak sah ialah, terdapat tiga Pembolehubah: lebar pelayar, lebar sebenar peranti, dpi. Mari kita gunakan formula untuk menyatakan hubungan antara mereka (bukan hubungan sebenar, hanya untuk penjelasan mudah lebar sebenar peranti * dpi = Lebar penyemak imbas di sini, lebar sebenar peranti adalah nilai yang diketahui yang tidak boleh kita kendalikan . , kita boleh menetapkan satu daripada dua pembolehubah lain untuk mempengaruhi yang lain Dalam ios, apa yang boleh kita ubah ialah lebar penyemak imbas, dan dpi dijana secara automatik Dalam Android, apa yang boleh kita ubah ialah dpi dan lebar penyemak imbas dijana secara automatik. Untuk Android, tidak kira bagaimana kita menetapkan lebar, ia tidak akan menjejaskan lebar penyemak imbas.

ps: Biar saya bercakap tentang satu lagi masalah pelik di sini: dalam htc's g11 (saya hanya mempunyai satu telefon htc ini, dan saya belum menguji yang lain), jika dpi ditetapkan tanpa menetapkan lebar secara eksplisit, maka pengguna- scalable= no tidak berkuat kuasa, iaitu: , yang tidak boleh menghalang pengguna daripada menskala skrin. Kami perlu menetapkan nilai lebar secara eksplisit Walaupun nilai ini tidak mempunyai sebarang kesan pada peleraian penyemak imbas di bawah Android (ia masih akan memberi kesan pada iOS), kami masih perlu menetapkannya dan nilai ini mestilah lebih besar daripada 320. Jika kurang daripada atau sama dengan 320, user-scalable=no tidak boleh berkuat kuasa. Masalah ini hanya berlaku pada telefon g11 htc, bukan pada telefon aquos. Keserasian dengan android benar-benar sakit kepala @_@, saya tidak tahu berapa banyak masalah yang akan berlaku pada masa hadapan. Pada winphone, hasilnya lebih pelik: jika saya menetapkan lebar port pandang kepada nilai yang lebih besar daripada 480, user-scalable=no akan menjadi tidak sah, tetapi jika saya menetapkan nilai kurang daripada 480, user-scalable=no akan mengambil masa kesan. Tetapi tidak kira apa nilai yang saya tetapkan untuk lebar viewport, ia tidak mempunyai kesan yang dijangkakan pada lebar yang sebenarnya dipaparkan oleh winphone, dan sasaran-densitydpi tidak mempunyai kesan sama ada. Tetapkan lebar jika kurang daripada 480, skrin akan berskala, tetapi nisbah penskalaan adalah berbeza sepenuhnya daripada yang saya jangkakan. Saya tidak tahu sama ada ini masalah Winphone atau masalah pelaksanaan Dell.

3) Artikel ini harus berkaitan secara langsung dengan yang sebelumnya: apabila peranti iOS berada dalam mod landskap atau potret, ia akan melaraskan dpi secara automatik Tidak kira landskap atau skrin potret, ia boleh memastikan bahawa lebar penyemak imbas adalah sama dengan nilai yang ditetapkan dalam port pandangan, jadi lebar penyemak imbas akan sama dengan nilai yang ditetapkan dalam port pandangan Apabila skrin dihidupkan, saiz kandungan yang dipaparkan pada halaman akan berskala dan berubah secara automatik. Apabila telefon Android berada dalam mod landskap atau potret, dpi tidak akan berubah dan apabila skrin berada dalam mod landskap atau potret, halaman web tidak akan dizum. Atas sebab ini, ios boleh memastikan bahawa halaman skrin mendatar dan menegak tidak akan mempunyai bar skrol dan memenuhi skrin, tetapi Android tidak dapat menjamin ini Jika skrin penuh secara mendatar, ia tidak boleh menjadi skrin penuh secara menegak, dan sebaliknya.

4) Untuk peranti iOS, jika paparan lebar ditentukan dan kedudukan terluas halaman melebihi lebar, lebar akan menjadi tidak sah dan masih akan dipaparkan mengikut lebar terluas (tidak akan ada bar skrol). Tetapi masalah yang sangat pelik akan timbul pada masa ini Selepas anda menukar skrin telefon anda antara landskap dan potret beberapa kali, anda akan mendapati halaman anda dibesarkan secara automatik dan bar skrol muncul, tetapi sebenarnya, lebar yang diperbesarkan tidak. sama dengan lebar yang anda tetapkan. Untuk mengelakkan ini, anda perlu menetapkan lebar agar lebih besar daripada, atau sama dengan, bahagian terluas halaman.