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 @viewport
terjemahan - terjemahan itu:
width=device-width
untuk min-width: extend-to-zoom; max-width: 100vw;
Dokumen Adaptasi Perangkat CSS Level 1 menyatakan:
The
width
danheight
viewport<META>
properti yang diterjemahkan ke dalamwidth
danheight
deskripsi, pengaturanmin-width
/min-height
nilaiextend-to-zoom
danmax-width
/max-height
nilai 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 width
singkatan deskripsi digambarkan sebagai:
Ini adalah deskripsi singkat untuk mengatur keduanya
min-width
danmax-width
. Satu<viewport-length>
nilai akan mengatur keduanyamin-width
danmax-width
ke nilai itu. Dua<viewport-length>
nilai akan ditetapkanmin-width
ke yang pertama danmax-width
ke 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 100vw
bagian. Dalam bagian 10.4 , mereka menjelaskan:
device-width
dandevice-height
menerjemahkan masing-masing ke 100vw dan 100vh
Jadi kita akhirnya bisa melihat bagaimana width=device-width
diterjemahkan 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-zoom
nilai?
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.
1.0
, tapi saya tidak yakin tentang ini. Bagaimanapun, jawaban yang bagus, terima kasih!viewport
atribut tag adalah ketika Anda tidak menentukaninitial-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 lebar360px
, terlepas dari ukuran viewport awal.<meta name="viewport" content="360px", initial-scale=1.0>
, Anda membuatmin-width
toextend-to-zoom
dan digabungkan denganzoom
nilai, ini akan selalu menentukan nilai terbesar antara lebar viewport awal dibagi dengan nilai zoom danmax-width
. Dalam prosedur membatasi (bagian 7.2), Anda akan melihat bahwawidth = MAX(min-width, MIN(max-width, initial-width))
. Dari pengujian terbatas saya, kesimpulan saya adalah bahwa ketikamax-width
ditentukan lebih kecil dari ...max-width
nilainya lebih besar dari lebar viewport awal, nilai minimum akan menjadi lebar viewport awal dan nilai maksimum akan menjadi, yah,max-width
nilai. Secaraextend-to-zoom
semantik masuk akal karenaextend-to-zoom
padamin-width
secara harfiah memperluas nilai ke lebar viewport ketika zoom1.0
. Dan ini selaras dengan jawaban di atas, yangextend-to-zoom
mengubah / memperluas / memperpanjangwidth
nilai yang diberikan tingkat zoom.initial-scale
atribut, 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.