HTML中設定網頁自適應的MATE標籤
阿新 • • 發佈：2019-01-04
一、<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
1.name="viewport" //設定視口（網頁可繪製的區域）
2.width=device-width //應用程式的寬度和螢幕的寬度是一樣的
3.height=device-height //應用程式的高度和螢幕的高是一樣的
4.initial-scale=1.0 //應用程式啟動時候的縮放尺度（1.0表示不縮放）
5.minimum-scale=1.0 //使用者可以縮放到的最小尺度（1.0表示不縮放）
6.maximum-scale=1.0 //使用者可以放大到的最大尺度（1.0表示不縮放）
7.user-scalable=no //使用者是否可以通過他的手勢來縮放整個應用程式，使應用程式的尺度發生一個改變（yes/no）
二、<meta name="viewport" content="target-densitydpi=device-dpi, width=480px, user-scalable=no">
1.target-densitydpi=device-dpi //指定螢幕畫素密度DPI,device-dpi 為裝置原本的DPI值,不會有任何縮放.( dpi是單位,一般指每英寸的畫素)
三、<meta name="apple-mobile-web-app-capable" content="yes">
//說明：網站開啟對web app程式的支援
1.apple-mobile-web-app-capable //
2.content="yes" //是否開啟（開啟）
四、<meta http-equiv="X-UA-Compatible" content="IE=edge"> //強制使用ie最新核心模式渲染
五、<meta name="format-detection" content="telephone=no">
當該 HTML 頁面在手機上瀏覽時，該標籤用於指定是否將網頁內容中的手機號碼顯示為撥號的超連結
在 iPhone 上預設值是：
<meta name="format-detection" content="telephone=yes"/>
如果你不希望手機自動將網頁中的電話號碼顯示為撥號的超連結，那麼可以這樣寫：
<meta name="format-detection" content="telephone=no"/>
六、<meta content="email=no" name="format-detection" />//將不識別郵箱，告訴裝置忽略將頁面中的數字識別為電話號碼 。
七、<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）。
八、<meta name="apple-touch-fullscreen" content="yes"> //"新增到主螢幕“後，全屏顯示
九、<meta name="apple-mobile-web-app-capable" content="yes" />
//這meta的作用就是刪除預設的蘋果工具欄和選單欄。content有兩個值”yes”和”no”,當我們需要顯示工具欄和選單欄時，這個行meta就不用加了，預設就是顯示。
十、蘋果web app其他設定：
1).<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）。
2).<link rel="apple-touch-startup-image" href="milanoo_startup.png" />
說明：這個link就是設定啟動時候的介面（圖片五），放置的路勁和上面類似。
使用：該路徑需要注意的就是放到將網站的文件根目錄下但不是伺服器的文件的根目錄。官方規定啟動介面的尺寸必須為 320*640（px），原本以為Retina螢幕可以支援雙倍，但是不支援，圖片顯示不出來。
十一、<META NAME="MobileOptimized" CONTENT="240">
//瀏覽器不會自動調整檔案的大小,也就是說是固定大小,不會隨著瀏覽器拉伸縮放。
1.name="viewport" //設定視口（網頁可繪製的區域）
2.width=device-width //應用程式的寬度和螢幕的寬度是一樣的
3.height=device-height //應用程式的高度和螢幕的高是一樣的
4.initial-scale=1.0 //應用程式啟動時候的縮放尺度（1.0表示不縮放）
5.minimum-scale=1.0 //使用者可以縮放到的最小尺度（1.0表示不縮放）
6.maximum-scale=1.0 //使用者可以放大到的最大尺度（1.0表示不縮放）
7.user-scalable=no //使用者是否可以通過他的手勢來縮放整個應用程式，使應用程式的尺度發生一個改變（yes/no）
二、<meta name="viewport" content="target-densitydpi=device-dpi, width=480px, user-scalable=no">
1.target-densitydpi=device-dpi //指定螢幕畫素密度DPI,device-dpi 為裝置原本的DPI值,不會有任何縮放.( dpi是單位,一般指每英寸的畫素)
三、<meta name="apple-mobile-web-app-capable" content="yes">
//說明：網站開啟對web app程式的支援
1.apple-mobile-web-app-capable //
2.content="yes" //是否開啟（開啟）
四、<meta http-equiv="X-UA-Compatible" content="IE=edge"> //強制使用ie最新核心模式渲染
五、<meta name="format-detection" content="telephone=no">
當該 HTML 頁面在手機上瀏覽時，該標籤用於指定是否將網頁內容中的手機號碼顯示為撥號的超連結
在 iPhone 上預設值是：
<meta name="format-detection" content="telephone=yes"/>
如果你不希望手機自動將網頁中的電話號碼顯示為撥號的超連結，那麼可以這樣寫：
<meta name="format-detection" content="telephone=no"/>
六、<meta content="email=no" name="format-detection" />//將不識別郵箱，告訴裝置忽略將頁面中的數字識別為電話號碼 。
七、<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）。
八、<meta name="apple-touch-fullscreen" content="yes"> //"新增到主螢幕“後，全屏顯示
九、<meta name="apple-mobile-web-app-capable" content="yes" />
//這meta的作用就是刪除預設的蘋果工具欄和選單欄。content有兩個值”yes”和”no”,當我們需要顯示工具欄和選單欄時，這個行meta就不用加了，預設就是顯示。
十、蘋果web app其他設定：
1).<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）。
2).<link rel="apple-touch-startup-image" href="milanoo_startup.png" />
說明：這個link就是設定啟動時候的介面（圖片五），放置的路勁和上面類似。
使用：該路徑需要注意的就是放到將網站的文件根目錄下但不是伺服器的文件的根目錄。官方規定啟動介面的尺寸必須為 320*640（px），原本以為Retina螢幕可以支援雙倍，但是不支援，圖片顯示不出來。
十一、<META NAME="MobileOptimized" CONTENT="240">
//瀏覽器不會自動調整檔案的大小,也就是說是固定大小,不會隨著瀏覽器拉伸縮放。