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

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:

• content = "width = lebar perangkat, skala awal = 1.0"
• content = "skala awal = 1.0"

Ini dapat membantu dengan pengujian.

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.