Efek samping dari menghapus "width = device-width" dari meta tag viewport ketika "skala awal = 1.0" juga diatur

9

Meskipun <meta name="viewport">tag tidak standar, "dihormati oleh sebagian besar peramban seluler karena dominasi de-facto."

Satu kelemahan dari itu tidak menjadi standar web yang benar adalah dokumentasi rinci tidak tersedia seperti standar lainnya. The Kelompok Kerja CSS memiliki spesifikasi untuk ini, jadi itulah yang saya terutama menggunakan sebagai sebuah karya otoritatif.

Pertanyaan utama saya adalah:

Apa perbedaan yang dirasakan antara deklarasi berikut?

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="initial-scale=1.0">

Atau ditanya, apa perbedaan antara kedua @viewport CSS at-rules ini:

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}
/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

Bagaimana saya sampai pada @viewportterjemahan - terjemahan itu:

width=device-width untuk min-width: extend-to-zoom; max-width: 100vw;

Dokumen Adaptasi Perangkat CSS Level 1 menyatakan:

The widthdan heightviewport <META>properti yang diterjemahkan ke dalam widthdan heightdeskripsi, pengaturan min-width/ min-heightnilai extend-to-zoomdan max-width/ max-heightnilai dengan panjang dari viewport.

Mereka juga memberi contoh :

<META>Elemen ini :

<meta name="viewport" content="width=500, height=600">

diterjemahkan menjadi:

@viewport {
    width: extend-to-zoom 500px;
    height: extend-to-zoom 600px;
}

The widthsingkatan deskripsi digambarkan sebagai:

Ini adalah deskripsi singkat untuk mengatur keduanya min-widthdan max-width. Satu <viewport-length>nilai akan mengatur keduanya min-widthdan max-widthke nilai itu. Dua <viewport-length>nilai akan ditetapkan min-widthke yang pertama dan max-widthke yang kedua.

Jadi masuk akal bahwa width: extend-to-zoom 500px;itu setara dengan min-width: extend-to-zoom; max-width: 500px;.

Itu hanya meninggalkan 100vwbagian. Dalam bagian 10.4 , mereka menjelaskan:

device-widthdan device-heightmenerjemahkan masing-masing ke 100vw dan 100vh

Jadi kita akhirnya bisa melihat bagaimana width=device-widthditerjemahkan min-width: extend-to-zoom; max-width: 100vw;.

initial-scale=1.0 untuk zoom: 1.0; width: extend-to-zoom;

Ini adalah contoh kata demi kata :

<META>Elemen ini :

<meta name="viewport" content="initial-scale=1.0">

diterjemahkan menjadi:

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

Pertanyaan lain yang saya miliki di sini adalah, apa sebenarnya adalah extend-to-zoomnilai?

The dokumentasi di atasnya dan yang prosedur resolusi yang sulit untuk dipahami. Kalau ada yang bisa mengarahkan saya ke beberapa contoh lebih lanjut tentang ini yang akan sangat dihargai.


Selain semua hal di atas, saya telah mengumpulkan situs cepat - https://romellem.github.io/temp-site/viewport/ - untuk menguji beberapa konfigurasi viewport.

Yaitu:

Ini dapat membantu dengan pengujian.

romellem
sumber

Jawaban:

5

Sebelum kita mempelajari apa yang Anda minta, mari kita tinjau sedikit tentang mengapa viewporttag meta ada di tempat pertama. Inilah yang saya kumpulkan.


Mengapa kami membutuhkan viewporttag?

Area pandang adalah area tempat konten web dapat dilihat. Biasanya, halaman yang dirender (konten web) lebih besar dari viewport. Akibatnya, kami biasanya menggunakan scrollbar untuk melihat konten yang disembunyikan (karena viewport tidak dapat menampilkan semuanya). Dikutip dari Modul Adaptasi Perangkat CSS Level 1 :

Viewport sempit adalah masalah untuk dokumen yang dirancang agar terlihat bagus di browser desktop. Hasilnya adalah vendor peramban seluler menggunakan inisial tetap berisi ukuran blok yang berbeda dari ukuran viewport, dan dekat dengan jendela peramban desktop biasa. Selain menggulir atau menggeser, zoom sering digunakan untuk mengubah antara ikhtisar dokumen dan memperbesar bidang dokumen tertentu untuk dibaca dan berinteraksi.

Di perangkat seluler (dan perangkat lain yang lebih kecil), blok awal yang berisi biasanya lebih besar daripada viewport. Misalnya, perangkat seluler yang memiliki lebar layar 640pxmungkin memiliki blok awal yang berisi 980px. Dalam hal ini, blok yang berisi awal menyusut 640pxsehingga dapat masuk ke layar ponsel. 640pxLebar ini (lebar layar) adalah apa yang disebut initial-widthviewport yang akan berhubungan dengan diskusi kita.

Jadi .... Mengapa kita perlu viewporttag ini ? Nah, saat ini, kami memiliki pertanyaan media yang memungkinkan kami mendesain untuk perangkat seluler. Namun, permintaan media ini tergantung pada lebar viewport yang sebenarnya . Di perangkat seluler, agen pengguna secara otomatis mengubah ukuran ukuran viewport awal ke yang berbeda tetap (biasanya lebih besar dari ukuran viewport awal). Jadi jika lebar viewport perangkat seluler sudah diperbaiki, aturan CSS yang kami gunakan dalam permintaan media tidak akan dieksekusi hanya karena lebar viewport tidak pernah berubah. Menggunakan viewporttag, kita dapat mengontrol yang sebenarnya lebar viewport ini (setelah ditata oleh UA). Dikutip dari MDN :

Namun, mekanisme ini tidak begitu baik untuk halaman yang dioptimalkan untuk layar sempit menggunakan kueri media - jika viewport virtual 980px misalnya, kueri media yang menghasilkan 640px atau 480px atau kurang tidak akan pernah digunakan, membatasi efektivitas seperti teknik desain responsif.

Perhatikan bahwa viewporttag juga dapat mengubah ketinggian viewport yang sebenarnya, bukan hanya lebarnya


viewport tag width

The widthdalam viewporttag diterjemahkan ke max-widthdalam @viewportaturan. Ketika Anda mendeklarasikan widthas device-width, itu diterjemahkan ke 100%dalam @viewportaturan. Nilai persentase diselesaikan berdasarkan pada initial-widthviewport. Jadi jika kita masih menggunakan contoh di atas, max-widthakan memutuskan untuk nilai 640px. Seperti yang Anda ketahui, ini hanya menentukan max-width. The min-widthotomatis akan extend-to-zoom.


extend-to-zoom

Pertanyaan Anda adalah apa sebenarnya nilai extended-to-zoom ? Dari apa yang telah saya kumpulkan, ini adalah nilai yang digunakan untuk mendukung viewport memperluas dirinya agar sesuai dengan area tampilan pada tingkat zoom yang diberikan. Dengan kata lain, ini adalah nilai ukuran viewport yang berubah berdasarkan nilai pembesaran yang ditentukan. Sebuah contoh? Mengingat bahwa max-zoomnilai stylesheet UA adalah 5.0dan initial-widthis 320px, <meta name="viewport" content="width=10">akan menyelesaikan ke lebar aktual awal 64px. Ini masuk akal karena jika perangkat hanya memiliki 320px dan hanya dapat diperbesar 5xdengan nilai normal, maka ukuran viewport minimum adalah 320px divided by 5, yang berarti hanya menampilkan 64px pada satu waktu ( dan tidak 10pxkarena itu akan membutuhkan pembesaran 32x!). Nilai ini akan digunakan oleh algoritma untuk menentukan cara memperluas (mengubah) min-widthdan max-widthnilai - nilai, yang akan berperan dalam menentukan lebar viewport yang sebenarnya.


Menyatukan semuanya

Jadi intinya, apa bedanya antara <meta name="viewport" content="width=device-width, initial-scale=1.0">dan <meta name="viewport" content="initial-scale=1.0">? Cukup ulangi langkah-langkah algoritma ( ini dan ini ). Mari kita lakukan yang terakhir (yang tanpa widthatribut) terlebih dahulu. (Kami akan menganggap bahwa initial-widthviewportnya adalah 640px.)

  • widthtidak diatur, ini menghasilkan max-widthdan min-widthberada extend-to-zoomdalam @viewportaturan.
  • initial-scaleadalah 1.0. Ini berarti zoomnilainya juga1.0
  • Mari kita selesaikanextend-to-zoom . Langkah:
    1. extend-zoom = MIN(zoom, max-zoom). The MINOperasi memutuskan untuk nilai yang non auto. Di sini, zoomadalah 1.0dan max-zoomsekarang auto. Ini berarti bahwa extend-zoomadalah1.0
    2. extend-width = initial-width / extend-zoom. Ini mudah; bagi 640 dengan 1. Anda dapatkan extend-widthsama dengan640
    3. Karena extend-zoomnon- auto, kita akan beralih ke persyaratan kedua. max-widthmemang extend-to-zoom, ini berarti max-widthakan diatur ke extend-width. Jadi,max-width = 640
    4. min-widthjuga extend-to-zoom, ini berarti pengaturan min-widthuntuk max-width. Kita mendapatkanmin-width = 640
  • Setelah menyelesaikan nilai non-auto (yaitu extend-to-zoom) untuk max-widthdan min-width. Kita dapat melanjutkan ke prosedur selanjutnya . Karena min-widthatau max-widthtidak auto, kita akan menggunakan pertama ifdalam prosedur, sehingga pengaturan viewport yang sebenarnya awal widthuntuk MAX(min-width, MIN(max-width, initial-width)), yang setara dengan MAX(640, MIN(640, 640)). Ini memutuskan untuk 640untuk viewport aktual awal Andawidth
  • Pindah ke prosedur selanjutnya . Pada langkah ini, widthtidak auto. Nilai tersebut tidak berubah dan kita berakhir dengan viewport yang sebenarnya widthdari640px

Mari kita lakukan yang pertama.

  • widthdiatur, ini menghasilkan max-widthmenjadi 100%( 640pxdalam kasus kami) dan min-widthberada extend-to-zoomdi @viewportaturan.
  • initial-scaleadalah 1.0. Ini berarti zoomnilainya juga1.0
  • Mari kita selesaikanextend-to-zoom . Jika Anda mengikuti langkah-langkah hati-hati (hampir sama seperti di atas), Anda akan berakhir dengan max-widthdari 640pxdan min-widthdari 640px.
  • Anda mungkin dapat melihat polanya sekarang. Kami akan mendapatkan lebar viewport aktual sebesar 640px.

Jadi apa perbedaan yang dirasakan? Pada dasarnya tidak ada . Keduanya melakukan hal yang sama. Semoga penjelasan saya membantu ;-) Jika ada yang salah, jangan beri tahu saya.

Richard
sumber
Ini bagus dan sesuai dengan apa yang saya cari. Saya akan menandai ini sebagai jawabannya tetapi saya ingin penjelasan ketika Anda bisa menemukan perbedaan. Sepertinya perbedaan utama adalah jika Anda memiliki konten awal beberapa kecil dengan dan zoom awal tidak diatur 1.0, tapi saya tidak yakin tentang ini. Bagaimanapun, jawaban yang bagus, terima kasih!
romellem
@romellem Ya, salah satu cara Anda dapat menemukan perbedaan yang dirasakan saat menentukan viewportatribut tag adalah ketika Anda tidak menentukan initial-scale. Misalnya, ketika Anda menulis <meta name="viewport" content="360px">, Anda tahu bahwa Anda tidak mengendalikan level zoom awal. Karena itu, dari pengujian terbatas saya, gaya UA selalu menyusut (melalui beberapa prosedur yang mungkin tidak normatif) viewport. Namun, viewport yang sebenarnya akan selalu berada pada lebar 360px, terlepas dari ukuran viewport awal.
Richard
@romellem Kelanjutan . Namun, ketika Anda menulis <meta name="viewport" content="360px", initial-scale=1.0>, Anda membuat min-widthto extend-to-zoomdan digabungkan dengan zoomnilai, ini akan selalu menentukan nilai terbesar antara lebar viewport awal dibagi dengan nilai zoom dan max-width. Dalam prosedur membatasi (bagian 7.2), Anda akan melihat bahwa width = MAX(min-width, MIN(max-width, initial-width)). Dari pengujian terbatas saya, kesimpulan saya adalah bahwa ketika max-widthditentukan lebih kecil dari ...
Richard
@romellem Kelanjutan . ... sebenarnya lebar viewport, itu akan selalu menyelesaikan ke lebar viewport awal. Namun, ketika max-widthnilainya lebih besar dari lebar viewport awal, nilai minimum akan menjadi lebar viewport awal dan nilai maksimum akan menjadi, yah, max-widthnilai. Secara extend-to-zoomsemantik masuk akal karena extend-to-zoompada min-widthsecara harfiah memperluas nilai ke lebar viewport ketika zoom 1.0. Dan ini selaras dengan jawaban di atas, yang extend-to-zoommengubah / memperluas / memperpanjang widthnilai yang diberikan tingkat zoom.
Richard
@romellem Tentu saja, ini tidak terbatas pada hanya mengendalikan initial-scaleatribut, tetapi itu salah satu cara untuk menghasilkan perbedaan yang dirasakan. Revisi komentar pertama saya, gaya UA juga dapat memperbesar (tidak hanya mengecilkan) viewport ketika lebar perangkat lebih besar dari 360px.
Richard