Pada pembelajaran front-end sebelumnya, pengertian meta tag hanya kalimat ini saja.
<meta rangkaian karakter=UTF-8>
Namun ketika Anda membuka website apa pun, ada kolom meta tag di tag head-nya. Misalnya kita punya website bela diri VeVb, tapi saya kurang familiar, jadi saya tambahkan meta tag di depan rencana belajar.
<nama meta=konten viewport=lebar=lebar perangkat, skala awal=1,0, skala maksimum=1,0, skala minimum=1,0, skala pengguna=tidak>
Ini adalah yang paling umum digunakan. Instruksi lebar dan tinggi masing-masing menentukan lebar dan tinggi logis dari area pandang. Nilainya bisa berupa angka dalam piksel atau simbol penanda khusus. Direktif lebar menggunakan tag lebar perangkat untuk menunjukkan bahwa lebar area pandang harus sama dengan lebar layar perangkat. Demikian pula, direktif tinggi menggunakan tanda tinggi perangkat untuk menunjukkan bahwa tinggi area pandang adalah tinggi layar perangkat.
Arahan yang dapat diskalakan pengguna menentukan apakah pengguna dapat memperbesar area pandang, yaitu tampilan halaman web. Nilai yes memperbolehkan pengguna untuk melakukan zoom, nilai no melarang melakukan zoom.
Arahan skala awal digunakan untuk mengatur penskalaan awal halaman web. Nilai penskalaan awal default bervariasi antar browser ponsel cerdas. Biasanya perangkat akan merender seluruh halaman web di browser, menyetelnya ke 1.0 akan menampilkan dokumen web tanpa skala.
Arahan skala maksimum dan skala minimum digunakan untuk menetapkan batas pengguna pada rasio zoom halaman Web. Nilainya berkisar antara 0,25 hingga 10,0. Seperti skala awal, nilai arahan ini adalah penskalaan yang diterapkan pada konten area pandang.
Semua browser ponsel cerdas mendukung arahan lebar dan skalalabel pengguna dari tag <meta> ViewPort. Namun Opera Mobile tidak menggunakan arahan yang dapat diskalakan pengguna, melainkan berargumentasi bahwa pengguna harus selalu mempertahankan kemampuan untuk memperbesar halaman web di browser seluler.
Berikut ini sangat jarang digunakan. rasio piksel perangkatwindow.devicePixelRatio adalah rasio piksel fisik terhadap piksel yang tidak bergantung pada perangkat (penurunan) pada perangkat. Ekspresi rumusnya adalah: window.devicePixelRatio = piksel fisik/penurunan
layar adaptif situs web yang sesuai dengan layarJika nilai konten kurang dari atau sama dengan lebar layar, penyesuaian layar adaptif situs web akan dinonaktifkan. Situs web tidak akan diskalakan seiring dengan perluasan browser.
Jika nilai konten lebih besar dari lebar layar; fit-to-screen akan diaktifkan
Terkait peramban Apple08-07-2015
<nama meta=konten viewport=ui-minimal>
Di Safari di iOS 7.1, atribut minimal-ui ditambahkan ke tag meta, sehingga bilah alamat atas dan bilah navigasi bawah dapat disembunyikan saat halaman web dimuat.
<meta name=konten berkemampuan aplikasi-web-apple-seluler=ya>
Apakah akan mengaktifkan fungsi webapp diatur ke ya. Situs web akan menghapus toolbar dan bilah menu default Apple dalam mode layar penuh.
<meta name=apple-touch-fullscreen content=ya>
Aktifkan dukungan untuk program aplikasi web
<meta name=format-deteksi konten=telepon=no><meta name=format-deteksi konten=email=no />
IPhone akan secara otomatis menambahkan gaya tautan ke teks Anda, dan klik nomor tersebut untuk menghubungi nomor tersebut secara otomatis!
phone=no mengabaikan nomor pada halaman dan mengidentifikasinya sebagai nomor telepon
telepon=yes mengaktifkan konversi nomor menjadi tautan dial-up. Ini diaktifkan secara default!
<meta name=apple-mobile-web-app-status-bar-style content=default /><meta name=apple-mobile-web-app-status-bar-style content=hitam /><meta name=apple- konten-gaya-status-aplikasi-web-seluler-konten=hitam-transparan />
Mengontrol gaya tampilan bilah status default (putih) hitam (hitam) hitam-transparan (abu-abu tembus pandang)
tag tautan ikon-sentuh-apelJika apple-mobile-web-app-capable diatur ke ya, Anda dapat menggunakan tombol Tambahkan ke Layar Utama untuk menambahkan situs web ke layar utama di iPhone, iPad, dan iTouch Safari.
Dengan mengatur tag ikon apple-touch yang sesuai, ikon yang ditambahkan ke layar beranda akan menggunakan gambar yang kami tentukan.
Berikut ini adalah memilih ikon optimal untuk perangkat ox yang berbeda. Ukuran default untuk iPhone adalah 60px, iPad adalah 76px, dan layar retina dikalikan 2 kali.
<link rel=apple-touch-icon href=touch-icon-iphone.png><link rel=apple-touch-icon ukuran=76×76″ href=touch-icon-ipad.png><link rel=apple- ukuran ikon sentuh=120×120″ href=ikon-sentuh-iphone-retina.png><link rel=ikon-sentuh-apel ukuran=152×152″ href=ikon-sentuh-ipad-retina.png>
Sebelum ios7, sistem akan menambahkan efek khusus (sudut membulat dan sorotan) ke ikon secara default. Jika Anda tidak ingin sistem menambahkan efek khusus, Anda dapat menggunakan apple-touch-icon-precompose.png alih-alih apple-touch-. ikon.png.
Prioritas penggunaan ikon adalah sebagai berikut:Jika tidak ada ikon yang cocok dengan ukuran yang disarankan untuk perangkat terkait, ikon yang lebih besar dari ukuran yang disarankan namun paling dekat dengan ukuran yang disarankan akan digunakan terlebih dahulu.
Jika tidak ada ikon yang lebih besar dari ukuran yang disarankan, ikon yang paling mendekati ukuran yang disarankan akan dipilih terlebih dahulu.
Jika ada beberapa ikon yang memenuhi ukuran yang disarankan, ikon yang berisi kata kunci yang telah dikomposisi sebelumnya akan dipilih terlebih dahulu.
Jika Anda tidak menentukan ikon menggunakan tag tautan di area tersebut, maka secara otomatis akan mencari ikon png yang diawali dengan apple-touch-icon di direktori root situs web.
Catatan: ios7 tidak lagi menambahkan efek khusus ke ikon Sebelum ios7, efek khusus ditambahkan ke ikon secara default kecuali ikon tersebut memiliki kata kunci -precompose.png sebagai akhiran. Penjelajah Internet <meta http-equiv=X-UA-Compatible content=IE=edge> Cegah IE menggunakan mode kompatibilitas
<meta name=MobileOptimized content=320″> Tag lebar definisi yang ditetapkan oleh Microsoft untuk versi IE Mobile
Browser tidak akan secara otomatis menyesuaikan ukuran file, yang berarti ukurannya tetap dan tidak akan melebar atau menskalakan dengan browser.
<meta name=HandheldFriendly content=true /> : Baik untuk perangkat genggam, hanya benar atau salah
<meta name=screen-orientation content=portrait> Memaksa layar vertikal
<meta name=full-screen content=yes> Paksa layar penuh
<meta name=browsermode content=application> Mode aplikasi
<meta name=x5-orientation content=portrait> Memaksa layar vertikal
<meta name=x5-fullscreen content=true> Paksa layar penuh
<meta name=x5-page-mode content=app> Mode aplikasi
<meta name=renderer content=webkit> Aktifkan mode cepat
Meta mengacu pada elemen yang menyediakan informasi meta tentang halaman, seperti deskripsi dan kata kunci untuk mesin pencari dan frekuensi pembaruan. Tag terletak di bagian atas dokumen dan tidak berisi konten apa pun. Properti tag menentukan pasangan nama/nilai yang terkait dengan dokumen.
Apa saja fitur unik yang ada pada versi seluler?<meta content=width=device-width, initial-scale=1.0, maksimum-scale=1.0, user-scalable=0 name=viewport> <meta content=yes name=apple-mobile-web-app-capable> <meta konten=nama hitam=apple-mobile-web-app-status-bar-style> <meta content=telepon=tanpa nama=format-deteksi>
Meta tag pertama berarti: memaksa lebar dokumen dengan lebar perangkat tetap 1:1, dan rasio lebar maksimum dokumen adalah 1,0, dan pengguna tidak diperbolehkan mengklik layar untuk memperbesar tampilan;
Tag meta kedua adalah tag meta pribadi Safari di perangkat iPhone, yang artinya: izinkan penjelajahan mode layar penuh;
Tag meta ketiga juga merupakan tag pribadi iPhone, yang menentukan gaya bilah status di bagian atas Safari di iPhone;
Warna bilah status (bilah atas layar) pada aplikasi aplikasi web;
Nilai defaultnya adalah default (putih), yang dapat diatur menjadi hitam (hitam) dan hitam-transparan (abu-abu tembus pandang).
Catatan: Jika nilainya hitam-transparan, nilainya akan menempati posisi px halaman dan melayang di atas halaman (akan menutupi tinggi halaman 20px – layar Retina iphone4 dan itouch4 berukuran 40px).Meta tag keempat artinya: Memberitahu perangkat untuk mengabaikan nomor di halaman sebagai nomor telepon.
Mari kita lihat meta halaman seluler produsen besar: 1. Kecil<meta name=aplus-terminal content=1/><meta name=apple-mobile-web-app-title content=TMALL/><meta name=apple-mobile-web-app-capable content=yes/><meta nama=apple-mobile-web-app-status-style-style content=hitam-transparan/><meta name=viewport konten=lebar=lebar perangkat,skala awal=1,skala maksimum=1,skala pengguna=tidak/><nama meta=deteksi format konten=telepon=tidak, alamat=tidak>2. Taobao
<meta charset=utf-8><meta content=yes name=apple-mobile-web-app-capable/> <meta content=yes name=apple-touch-fullscreen/> <meta content=telephone=no,email= no name=format-detection/> <meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/><meta name=viewport konten=skala awal=0,5, skala maksimum=0,5, skala minimum=0,5, skalabel pengguna=tidak>3.Jingdong
<title>Versi Seluler Jingdong</title><meta name=viewport content=width=device-width, initial-scale=1.0, maksimum-scale=1.0, user-scalable=0;><meta http-equiv=Content -Ketik konten=teks/html; charset=GBK><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=format-detection content=telephone=no><meta http-equiv=Konten kedaluwarsa=-1><meta http-equiv= Konten Kontrol-Cache=tanpa-cache><meta http-equiv=Konten Pragma=tanpa-cache><nama meta=Isi kata kunci=><nama meta=konten deskripsi=>4. NetEase
<title>NetEase Mobile</title><meta name=viewport content=width=device-width,initial-scale=1, maksimum-skala=1, minimum-scale=1, user-scalable=no><meta content = telepon=tanpa nama=deteksi format /><nama meta=isi kata kunci= /><nama meta=isi deskripsi= />5. Baidu
<meta name=referrer content=selalu><meta charset=utf-8><meta name=viewport content=width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no><meta nama=format-deteksi konten=telepon=tidak>6. Sohu
<title>Mobile Sohu.com</title> <meta http-equiv=Jenis Konten content=text/html; charset=utf-8 /><meta http-equiv=Kontrol Cache content=no-cache />< nama meta=konten viewport=lebar=lebar perangkat, skala pengguna=tidak, skala awal=1.0, skala maksimum=1.0, skala minimum=1.0 /><meta nama=Konten yang Dioptimalkan Seluler=320/><nama meta=konten deskripsi= /><nama meta=konten kata kunci= />
----
Simulasikan halaman web seluler<nama meta=konten viewport=lebar=lebar perangkat, skalabel pengguna=tidak, skala awal=1,0, skala maksimum=1,0, skala minimum=1,0″>
area pandang -> jendela (area tampilan)
lebar=lebar perangkat lebar perangkat
area pandang<metaname = 'viewport' content = lebar=320><metaname = 'viewport 'content = width=device-width>
user-scalable=no/0 apakah akan mengizinkan penskalaan
skala awal=1,0 nilai awal
skala maksimum=1.0
skala minimum=1.0
-----------------------
<nama meta=konten viewport=lebar=lebar perangkat, dapat diskalakan pengguna=tidak>
user-scalable=no/0 menonaktifkan pengguna untuk menskalakan halaman
<nama meta=konten viewport=lebar=lebar perangkat, dapat diskalakan pengguna=tidak, skala awal=1,0″>
skala awal=1,0 menginisialisasi rasio zoom halaman
<nama meta=konten viewport=lebar=lebar perangkat, skala awal=1.0, skala maksimum=1.0, skalabel pengguna=0″>
skala maksimum=1,0 rasio skala maksimum (untuk masing-masing ponsel Huawei Meta8)
-----------------------
Meta khusus perangkat Apple:<!—Izinkan halaman web dijalankan sebagai aplikasi (izinkan penambahan ke layar utama)—><meta name=apple-mobile-web-app-capable content=yes><!—Warna bilah status—><meta name=apple- seluler -konten gaya bilah status-aplikasi-web=hitam>Meta Jingdong:
<meta name=viewport content=width=device-width, initial-scale=1.0, maksimum-scale=1.0, user-scalable=0″><meta name=apple-mobile-web-app-capable content=yes>< meta name=apple-mobile-web-app-status-bar-style content=black><!—Nomor telepon dan alamat email yang dilarang—><meta name=format-detection konten=telepon=tidak,email=tidak>Meta Taobao:
<meta content=yes name=apple-mobile-web-app-capable><!–Klik area halaman untuk menampilkan dalam layar penuh—><meta content=yes name=apple-touch-fullscreen/><meta content=telephone =no,email =no name=format-detection/><!–Informasi aplikasi, simpan riwayat sistem, efek gerakan–><meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/>Meta lainnya:
<!–Paksa 360 Browser menggunakan kernel chrome untuk merender halaman–><meta name=renderer content=webkit><!–Coba gunakan mode terbaru IE untuk merender–><meta http-equiv=X-UA -Konten yang kompatibel=IE= edge><!–Dioptimalkan untuk perangkat genggam, terutama untuk beberapa browser lama yang tidak mengenali area pandang, seperti BlackBerry–><meta name=HandheldFriendly content=true><!–browser lama Microsoft–><meta name=MobileOptimized content=320″><!– uc memaksa layar vertikal–><meta name=orientasi layar content=portrait><!– QQ memaksa layar layar vertikal –><meta name=x5-orientation content=portrait><!– UC memaksa layar penuh–><meta name=full-screen content=yes><!– QQ memaksa layar penuh–><meta name=x5-fullscreen content=true><!– Mode aplikasi UC–><meta name=browsermode content=application><!– Mode aplikasi QQ–><meta name=x5-page- mode konten=aplikasi>Meringkaskan
Di atas adalah keseluruhan isi artikel ini, saya berharap isi artikel ini memiliki nilai referensi tertentu untuk belajar atau bekerja semua orang. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk komunikasi Jaringan.