Rumah >hujung hadapan web >html tutorial >Penjelasan terperinci tentang aplikasi tag meta dalam pembangunan platform mudah alih_HTML/Xhtml_Pengeluaran halaman web

Penjelasan terperinci tentang aplikasi tag meta dalam pembangunan platform mudah alih_HTML/Xhtml_Pengeluaran halaman web

WBOY
WBOYasal
2016-05-16 16:37:561277semak imbas

Semua orang sangat mengenali tag meta dalam reka letak web pada platform desktop. Rakan yang melakukan SEO mesti mempunyai perasaan istimewa untuk meta pada platform mudah alih , apakah kesan ajaib teg meta pada platform mudah alih?

1. Port pandangan Meta

Bercakap tentang teg meta platform mudah alih, kita perlu bercakap tentang viewport.
Viewport ialah kawasan visual Untuk pelayar desktop, viewport merujuk kepada kawasan yang digunakan untuk melihat halaman web selepas mengalih keluar semua bar alat, bar status, bar skrol, dsb.
. Untuk halaman WEB tradisional, adalah perkara biasa untuk lebar 980 dipaparkan pada iPhone, dan ia juga memenuhi skrin Tetapi untuk aplikasi web, ia mungkin sedikit masalah Pada iPhone, aplikasi web kami biasanya mempunyai lebar 100cm dalam mod potret 320, apakah kesan 320 halaman kami akan dipaparkan pada iPhone? Sesetengah orang mungkin berfikir bahawa iPhone tidak 320mm lebar, ia sepatutnya memenuhi skrin, bukan? Mari kita lihat bagaimana reka letak berikut muncul pada iPhone

Salin kod
Kodnya adalah seperti berikut:





Meta Viewport

< ;body>

AppUE



Jadi kita mesti menukar viewport Kami mempunyai nilai atribut berikut yang boleh ditetapkan:

lebar: lebar port pandangan (julat dari 200 hingga 10,000, lalai ialah 980 piksel)
tinggi: ketinggian port pandangan (julat dari 223 hingga 10,000)
skala awal: skala awal (julat dari > ;0 hingga 10)
skala minimum: Nisbah minimum yang dibenarkan pengguna zum kepada
skala maksimum: Nisbah maksimum yang dibenarkan pengguna zum kepada
boleh skala pengguna: Sama ada pengguna boleh zum secara manual

Untuk atribut ini, kami boleh menetapkan satu atau lebih daripadanya, dan anda tidak perlu menetapkan semuanya pada masa yang sama iPhone akan mengira nilai atribut lain secara automatik berdasarkan atribut yang anda tetapkan secara langsung menggunakan nilai lalai.

Jika anda menetapkan skala awal=1, maka lebar dan tinggi secara automatik akan menjadi 320*356 dalam mod potret (bukan 320*480 kerana bar alamat dsb. semuanya menduduki ruang) dan 480*208 dalam mod landskap. Begitu juga, jika anda hanya menetapkan lebar, skala awal dan ketinggian akan dikira secara automatik. Contohnya, jika anda menetapkan lebar=320, skala awal ialah 1 apabila skrin berada dalam mod potret, dan ia menjadi 1.5 apabila skrin berada dalam mod landskap. Jadi bagaimanakah tetapan ini memberitahu Safari? Malah, ia sangat mudah, hanya meta, dalam bentuk:


Salin kod
Kod tersebut adalah seperti berikut:

Baiklah, kami boleh meletakkan halaman kami dalam skrin penuh, tidak perlu lagi risau tentang halaman dipaparkan sangat kecil!

2. Pengesanan format meta



Salin kod
Kodnya adalah seperti berikut:


Anda menulis rentetan nombor dengan jelas tanpa menambah gaya pautan, tetapi iPhone akan menambah gaya pautan pada teks anda secara automatik dan mengklik pada nombor itu akan mendail nombor itu secara automatik! Bagaimana untuk mengalih keluar pautan dail ini? Pada masa ini, meta kita harus menunjukkan kuasa ajaibnya lagi. Kodnya adalah seperti berikut:
telefon=tiada melumpuhkan penukaran nombor kepada pautan dail!

telefon=ya membolehkan penukaran nombor kepada pautan dail Untuk mendayakan fungsi penukaran, tidak perlu menulis meta ini didayakan secara lalai.

3. Keupayaan apple-mobile-web-app Meta



Salin kod
Kodnya adalah seperti berikut :

Fungsi meta ini adalah untuk memadamkan bar alat dan bar menu Apple lalai. kandungan mempunyai dua nilai "ya" dan "tidak". Apabila kita perlu memaparkan bar alat dan bar menu, tidak perlu menambah baris meta ini.

4. Meta apple-mobile-web-app-status-style

Salin kod
kod Seperti berikut:





digunakan untuk mengawal gaya paparan bar status

Salin kod
Kod tersebut adalah seperti berikut :

status-bar-style:black
status-bar-style:black-translucent
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn