網頁中關于Meta聲明有很多妙用是不很多朋友都不太了解的，在2017年09月01號的時候361源碼給大家介紹過《織夢DedeCMS文章內容頁原創Meta聲明標注實現實例》一文，不知道大家是否還有印象，這篇文章介紹的就是通過Meta聲明來實現原創保護的。今天361源碼要給大家介紹的同樣是Meta，但是重點介紹的是網頁移動端meta屬性基礎知識總結。隨著移動網絡的普及，手機網站越來越普遍，所以361資源覺得很有必要給廣大草根咱們“普及”下網頁移動端meta屬性基礎知識:
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- ios7.0版本以后，safari上已看不到效果 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可選default、black、black-translucent -->
<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>標題</title><link rel="stylesheet" href="index.css"></head><body>361源碼提醒，這里開始內容。</body></html>
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值與頁面定義的寬度一致 --><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>標題</title><link rel="stylesheet" href="index.css"></head><body>361源碼提醒，這里開始內容</body></html>
下面我們哪個案例來具體說明一下：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
說明解釋：
第一個meta標簽表示：強制讓文檔的寬度與設備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；
width - viewport的寬度 height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale - 允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放
第二個meta標簽是iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；
第三個meta標簽也是iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式；
在web app應用下狀態條（屏幕頂部條）的顏色；
默認值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
注意：若值為“black-translucent”將會占據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。
第四個meta標簽表示：告訴設備忽略將頁面中的數字識別為電話號碼。
這樣講，大家應該都能明白吧，如果你覺得我們的內容對您有所幫助，請給予我們支持，謝謝。
以上就是網頁移動端meta屬性基礎知識總結分享的全部內容，希望對大家的學習和解決疑問有所幫助，也希望大家多多支持武林網。新聞熱點
疑難解答
