Kesan ajaib kemahiran tutorial html5 meta tag_html5 mudah alih

Apabila membuat tapak web mudah alih, sebagai tambahan kepada kesederhanaan halaman dan operasi mudah, dsb., yang boleh dilihat oleh pelawat, ia adalah tetapan teg Meta Penetapan tag Meta dengan betul akan meningkatkan pengoptimuman enjin carian mudah alih laman web dan pemaparan pelayar mudah alih sangat membantu. Semua orang sangat biasa dengan tag meta dalam susun atur web platform desktop Ia sentiasa terletak di dalam elemen kepala Rakan yang melakukan SEO mesti mempunyai perasaan istimewa untuk meta Hari ini kita akan bercakap tentang tag meta platform mudah alih . Apakah kesan ajaib teg meta pada platform mudah alih?
1. Viewport of Meta
Apabila 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> ;
;badan>

AppUE

Jadi kita perlu menukar viewport , kita mempunyai nilai atribut berikut yang boleh ditetapkan:

lebar: lebar viewport (antara 200 hingga 10,000, lalai ialah 980 piksel)
ketinggian: ketinggian port pandangan (julat dari 223 hingga 10,000)
skala awal: skala awal (julat dari >0 hingga 10)
skala minimum: skala minimum yang dibenarkan pengguna untuk zum kepada
skala maksimum: skala maksimum yang dibenarkan oleh pengguna untuk mengezum kepada
boleh berskala pengguna: Sama ada pengguna boleh mengezum secara manual
Untuk atribut ini, kami boleh menetapkan satu atau lebih daripadanya. Anda tidak perlu menetapkan semuanya pada masa yang sama iPhone akan mengira nilai atribut lain secara automatik berdasarkan atribut yang anda tetapkan, bukannya Hanya gunakan 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 menjadi 1.5 apabila skrin berada dalam orientasi landskap. Jadi bagaimanakah tetapan ini memberitahu Safari? Malah, ia sangat mudah, hanya meta, dalam bentuk:

Salin kod
Kod tersebut adalah sebagai 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 secara automatik akan menambah gaya pautan pada teks anda dan mengklik pada nombor itu akan mendail nombor itu secara automatik! Bagaimana untuk mengalih keluar pautan dail ini? Pada masa ini, meta kami sepatutnya menunjukkan keajaibannya sekali lagi Kodnya adalah seperti berikut:
telefon=tiada melarang menukar 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 Meta bagi apple-mobile-web-app-capable

Fungsi meta ini adalah untuk memadamkan bar alat dan bar menu Apple. kandungan mempunyai dua nilai "ya" dan "tidak". Apabila kita perlu memaparkan bar alat dan bar menu, tidak perlu menambah baris meta ini.
4. Meta gaya apple-mobile-web-app-status-bar

Salin kod

Kod tersebut adalah seperti berikut:

Fungsinya adalah untuk mengawal gaya paparan bar status

Salin kod

Kod adalah seperti berikut:

status-bar-style:black
status-bar-style:black-translucent

Hari ini saya akan bercakap secara ringkas tentang teg Meta yang perlu ditambahkan pada versi mudah alih tapak web:
port pandangan
port pandangan hampir merupakan piawaian yang diiktiraf pada asalnya oleh Apple untuk versi mudah alih Safari pada iPhone Disebabkan Penjual Besar, diterima oleh kebanyakan penyemak imbas mudah alih lain, seperti Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox
Contoh paling asas, menjadikan tapak lebar skrin penuh pada mudah alih:

Salin kod

Kodnya adalah seperti berikut:

HandheldFriendly
Label dan MobileOptimized ini diperkenalkan di bawah ialah label de facto dalam era mesin ciri. Teg
HandheldFriendly mula-mula digunakan untuk menandakan kandungan mudah alih dalam penyemakan imbas AvantGo, dan kemudiannya menjadi standard universal untuk menanda tapak mudah alih, tetapi sokongan teg ini tidak diketahui.

Salin kod

Kodnya adalah seperti berikut:

MobileOptimized
Ini ialah teg meta khusus Windows yang akhirnya menjadi kaedah lain untuk mengenal pasti kandungan mudah alih, tetapi kelemahan teg ini ialah ia adalah lebar mesti diberikan, dan sekali lagi, sokongan teg ini tidak diketahui:

Salin kod

Kodnya adalah seperti berikut: