benpao：本來打算寫關(guān)于手機端的知識，想了想先從meta著手。接下來請大家看幾個網(wǎng)站的例子。

Web 前端工具分享：
《11款超贊的瀏覽器兼容性測試工具》
《10款讓W(xué)EB前端開發(fā)人員更輕松的實用工具》

一、天貓

<title>天貓觸屏版</title> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">     
<meta charset="utf-8">             
<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">

二、淘寶

<title>淘寶網(wǎng)觸屏版</title>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta property="wb:webmaster" content="c51923015ca19eb1">
<meta name="author" content="m.taobao.com">
<meta name="copyright" content="Copyright ?m.taobao.com 版權(quán)所有">
<meta name="revisit-after" content="1 days">
<meta name="keywords" content="">
<meta name="description" content="">

三、京東

<title> 京東 - 手機版 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta name="format-detection" content="telephone=no">
<meta name="Keywords" content="手機購物,WAP商城,日用百貨,3C家電,汽車用品"><meta name="description" content="京東手機版提供了包括數(shù)碼、家電、手機、電腦配件、網(wǎng)絡(luò)產(chǎn)品、日用百貨等數(shù)萬種商品，手機快捷購物，就上京東手機版。">

四、網(wǎng)易

<title>手機網(wǎng)易網(wǎng)</title>
<meta charset="UTF-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<meta name="apple-itunes-app" content="app-id=425349261">
<meta name="apple-mobile-web-app-capable" content="yes">

五、百度

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">

meta指元素可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。 標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。 標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對。

手機端特有的有哪些？

<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標(biāo)簽表示：強制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；

width - viewport的寬度 height - viewport的高度   
initial-scale - 初始的縮放比例  
minimum-scale - 允許用戶縮放到的最小比例   
maximum-scale - 允許用戶縮放到的最大比例  
user-scalable - 用戶是否可以手動縮放

第二個meta標(biāo)簽是iphone設(shè)備中的safari私有meta標(biāo)簽，它表示：允許全屏模式瀏覽；
第三個meta標(biāo)簽也是iphone的私有標(biāo)簽，它指定的iphone中safari頂端的狀態(tài)條的樣式；

在web app應(yīng)用下狀態(tài)條（屏幕頂部條）的顏色；
默認(rèn)值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
注意：若值為“black-translucent”將會占據(jù)頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。

第四個meta標(biāo)簽表示：告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼。

參考：

1、百度百科meta
2、手機網(wǎng)站前端設(shè)計
3、手機網(wǎng)頁制作的認(rèn)識（有關(guān)meta標(biāo)簽）
4、手機端的一些標(biāo)準(zhǔn)
5、HTML <meta> 標(biāo)簽

原文地址：cnblogs
作者：benpao

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博：擁有粉絲量65萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：