轉載：手機網頁製作的認識（有關meta標籤）

最後更新：2015-05-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

下面是手機網頁的一些認識：

一、<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">

    網頁手機wap2.0網頁的head裡加入下面這條元標籤，在iPhone的瀏覽器中頁面將以原始大小顯示，並不允許縮放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
width - viewport的寬度 height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許使用者縮放到的最小比例
maximum-scale - 允許使用者縮放到的最大比例
user-scalable - 使用者是否可以手動縮放

二、<meta name="format-detection" content="telephone=no">

當該 HTML 頁面在手機上瀏覽時，該標籤用於指定是否將網頁內容中的手機號碼顯示為撥號的超連結。

在 iPhone 上預設值是：

如果你不希望手機自動將網頁中的電話號碼顯示為撥號的超連結，那麼可以這樣寫：

三、<meta name="apple-mobile-web-app-capable" content="yes" />

說明：網站開啟對web app程式的支援。

四、<meta name="apple-mobile-web-app-status-bar-style" content="black" />

說明：

在web app應用下狀態條（螢幕頂部條）的顏色；
預設值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。

注意：若值為“black-translucent”將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina螢幕為40px）。

！！！！蘋果web app其他設定：

當然，配合web app的icon 和啟動介面需要額外的兩端代碼進行設定，如下所示：

<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />

說明：這個link就是設定web app的放置主畫面上icon檔案路徑

使用：

該路徑需要注意的就是放到將網站的主目錄下但不是伺服器的文檔的根目錄。
圖片尺寸可以設定為57*57（px）或者Retina可以定為114*114（px），ipad尺寸為72*72（px）

<link rel="apple-touch-startup-image" href="milanoo_startup.png" />

說明：這個link就是設定啟動時候的介面（圖片五），放置的路勁和上面類似。

使用：

該路徑需要注意的就是放到將網站的主目錄下但不是伺服器的文檔的根目錄。
官方規定啟動介面的尺寸必須為 320*640（px），原本以為Retina螢幕可以支援雙倍，但是不支援，圖片顯示不出來。

五、<meta name="apple-touch-fullscreen" content="yes">"添加到主畫面“後，全螢幕顯示 <meta name="apple-mobile-web-app-capable" content="yes" />
這meta的作用就是刪除預設的蘋果工具列和功能表列。content有兩個值”yes”和”no”,當我們需要顯示工具列和功能表列時，這個行meta就不用加了，預設就是顯示。
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />//將不識別郵箱
告訴裝置忽略將頁面中的數字識別為電話號碼
iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。這樣就能在使用者把網頁存為書籤時，在手機HOME介面建立應用程式樣式的表徵圖。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

----------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<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 name="keywords" content="">

----------------------------------------------------------------------------------------------------------------------------

參考：
1、百度百科meta

2、手機網站前端設計

3、手機網頁製作的認識（有關meta標籤）

4、手機端的一些標準

5、HTML <meta> 標籤

http://www.cnblogs.com/kuikui/p/3590673.html 轉載

轉載：手機網頁製作的認識（有關meta標籤）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

轉載：手機網頁製作的認識（有關meta標籤）

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support