Penerangan terperinci tentang HTML meta viewport attribute_HTML/Xhtml_Web page production

Apakah itu Viewport

Pelayar mudah alih meletakkan halaman dalam "tetingkap" maya (port view) Biasanya "tetingkap" maya ini lebih lebar daripada skrin, supaya setiap halaman web tidak perlu dihimpit. . Dalam tetingkap yang sangat kecil (yang 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: control viewport Saiz boleh ditentukan sebagai nilai, seperti 600, atau nilai khas seperti lebar peranti, iaitu lebar peranti (dalam piksel CSS apabila diskalakan 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 mengezum secara manual

Sesetengah soalan tentang viewport

Viewport bukan sekadar atribut unik pada ios, terdapat juga viewports 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 membuat lebar viewport sama dengan peranti fizikal Resolusi True dihidupkan, tidak membenarkan penskalaan pengguna. 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. 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's g11, telefon aquos (sistem android) daripada pengeluar yang tidak diketahui, 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 port pandang ditetapkan, sebagai contoh, user-scalable=no hanya ditetapkan, seperti , maka lebar masih akan dipaparkan sebagai 980 di bawah ios (iaitu, ia akan diskalakan dengan dpi secara lalai), tetapi ia tidak akan dipaparkan di bawah android dan winphone Selepas penskalaan, resolusi penyemak imbas adalah konsisten dengan resolusi tetapan sebenar.

2) Bei iOS-Geräten kann die Einstellung der Breite wirksam werden, bei Android ist die Einstellung der Breite jedoch nicht wirksam. Bei iOS-Geräten wird das Skalierungsverhältnis, d. h. dpi, automatisch basierend auf der von Ihnen eingestellten Breite und der tatsächlichen Auflösung berechnet. Unter Android ist die von Ihnen eingestellte Breite jedoch ungültig Weitere Informationen finden Sie in diesem Artikel: http://hi.baidu.com/j_fo/blog/item /748361279ebccd18908f9d7d.html. Mit anderen Worten, es gibt drei Variablen: Browserbreite, tatsächliche Gerätebreite und dpi. Lassen Sie uns einfach eine Formel verwenden, um die Beziehung zwischen ihnen auszudrücken (keine echte Beziehung, nur zur einfachen Erklärung). Unter den drei Variablen ist die tatsächliche Breite des Geräts ein bekannter Wert, den wir nicht bearbeiten können . Wir können eine der beiden anderen Variablen so einstellen, dass sie sich auf die andere auswirkt. In iOS können wir die Browserbreite ändern, und in Android können wir die DPI und die Browserbreite ändern wird automatisch generiert. Für Android hat die Einstellung der Breite keinen Einfluss auf die Browserbreite.

ps: Lassen Sie mich hier über ein weiteres seltsames Problem sprechen: Wenn beim HTC G11 (ich habe nur dieses eine HTC-Telefon und die anderen habe ich nicht getestet) die DPI eingestellt wird, ohne die Breite explizit festzulegen, dann wird user -scalable=no nicht wirksam, das heißt: , der Benutzer kann nicht daran gehindert werden, den Bildschirm zu skalieren. Wir müssen den Breitenwert explizit festlegen. Obwohl dieser Wert keinen Einfluss auf die Browserauflösung unter Android hat (unter iOS wird er dennoch Auswirkungen haben), müssen wir ihn dennoch festlegen und dieser Wert muss größer als 320 sein. Wenn der Wert kleiner oder gleich 320 ist, kann user-scalable=no nicht wirksam werden. Dieses Problem tritt nur auf dem HTC G11-Telefon auf, nicht auf dem Aquos-Telefon. Die Kompatibilität mit Android bereitet wirklich Kopfschmerzen @_@. Ich weiß nicht, wie viele Fallstricke es in Zukunft geben wird. Unter Winphone ist das Ergebnis noch seltsamer: Wenn ich die Breite des Ansichtsfensters auf einen Wert größer als 480 einstelle, ist user-scalable=no ungültig, aber wenn ich einen Wert kleiner als 480 einstelle, wird user-scalable=no akzeptiert Wirkung. Aber egal, welchen Wert ich für die Breite des Ansichtsfensters festlege, er hat nicht die erwartete Auswirkung auf die tatsächlich von Winphone angezeigte Breite, und target-densitydpi hat auch keine Auswirkung. Wenn die Breite kleiner als 480 ist, wird der Bildschirm skaliert, aber das Skalierungsverhältnis ist völlig anders als erwartet. Ich weiß nicht, nach welchen Regeln es skaliert. Ich weiß nicht, ob es sich hierbei um ein Winphone-Problem oder ein Dell-Implementierungsproblem handelt.

3) Dieser Artikel sollte in direktem Zusammenhang mit dem vorherigen stehen: Wenn sich das iOS-Gerät im horizontalen oder vertikalen Bildschirm befindet, wird die Auflösung automatisch angepasst, unabhängig davon, ob der horizontale oder vertikale Bildschirm angezeigt wird Stellen Sie sicher, dass die Browserbreite dem im Ansichtsfenster eingestellten Wert entspricht. Wenn sich der Bildschirm also im Quer- oder Hochformat befindet, wird die Größe des auf der Seite angezeigten Inhalts automatisch skaliert und geändert. Wenn sich das Android-Telefon im Quer- oder Hochformat befindet, ändert sich die Auflösung nicht, und wenn sich der Bildschirm im Quer- oder Hochformat befindet, wird die Webseite nicht gezoomt. Aus diesem Grund kann iOS sicherstellen, dass horizontale und vertikale Bildschirmseiten keine Bildlaufleisten haben und den Bildschirm ausfüllen. Android kann dies jedoch nicht garantieren. Wenn der Bildschirm horizontal voll ist, kann er vertikal nicht als Vollbild angezeigt werden, und umgekehrt.

4) Wenn bei iOS-Geräten die Breitenanzeige definiert ist und die breiteste Position der Seite die Breite überschreitet, ist die Breite ungültig und wird weiterhin entsprechend der breitesten Breite angezeigt (es gibt keine Bildlaufleiste). ). Zu diesem Zeitpunkt tritt jedoch ein sehr seltsames Problem auf. Nachdem Sie den Bildschirm Ihres Telefons mehrmals zwischen Quer- und Hochformat umgeschaltet haben, werden Sie feststellen, dass Ihre Seite automatisch vergrößert wird und eine Bildlaufleiste angezeigt wird, die vergrößerte Breite jedoch nicht die gleiche wie die Breite, die Sie eingestellt haben. Es spielt keine Rolle. Um dies zu verhindern, müssen Sie die Breite so einstellen, dass sie größer oder gleich dem breitesten Teil der Seite ist.