webapp meta和裝置像素比devicePixelRatio

標籤：style   http   io   ar   os   使用   for   sp   on   

webapp meta

<!-- 啟用360瀏覽器的極速模式(webkit) – --><meta name="renderer" content="webkit">
<!-- 避免IE使用相容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持功能最佳化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!--這meta的作用就是刪除預設的蘋果工具列和功能表列-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--網站開啟對web app程式的支援-->
<meta name="apple-touch-fullscreen" content="yes">
<!--手機號碼不被顯示為撥號連結-->
<meta name="format-detection" content="telephone=no">
<!--在web app應用下狀態條（螢幕頂部條）的顏色-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!--移動web頁面是否自動探測電話號碼-->
<meta http-equiv="x-rim-auto-match" content="none">

MobileOptimized

<meta name="MobileOptimized" content="width">

MobileOptimized 移動最佳化

fit-to-screen網站自適應螢幕

如果content的值小於或等於screen width 網站自適應螢幕fit-to-screen將被關閉網站不會隨著瀏覽器展開縮放

如果content的值大於screen width;fit-to-screen將開啟

viewport

<meta name="viewport" content="width=device-width,height=device-height, minimum-scale=1.0, maximum-scale=1.0,initial-scale=1, user-scalable=no"/>

width和height指令分別指定視區的邏輯寬度和高度。他們的值要麼是以像素為單位的數字，要麼是一個特殊的標記符號。width指令使用device-width標記可以指示視區寬度應為裝置的螢幕寬度。類似地height指令使用device-height標記指示視區高度為裝置的螢幕高度。

user-scalable指令指定使用者是否可以縮放視區，即縮放Web頁面的視圖。值為yes時允許使用者進行縮放，值為no時不允許縮放

initial-scale指令用於設定Web頁面的初始縮放比例。預設的初始縮放比例值因智能手機瀏覽器的不同而有所差異。通常情況下裝置會在瀏覽器中呈現出整個Web頁面，設為1.0則將顯示未經縮放的Web文檔。
maximum-scale和minimum-scale指令用於設定使用者對Web頁面縮放比例的限制。值的範圍為0.25至10.0之間。與initial-scale相同，這些指令的值是應用於視區內容的縮放比例。
所有智能手機瀏覽器都支援ViewPort <meta>標記的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令，而是主張使用者應始終保留在行動瀏覽器中縮放Web頁面的能力。 

apple-mobile-web-app-capable   

1. <meta name="apple-mobile-web-app-capable" content="yes">
2. 是否啟動webapp功能 設定為yes 網站就會在滿屏模式full-screen mode刪除預設的蘋果工具列和功能表列

format-detection

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

<meta name="format-detection" content="email=no" />

iPhone會自動把你這個文字加連結樣式、並且點擊這個數字還會自動撥號！

telephone=no就忽略頁面中的數字識別為電話號碼

telephone=yes就開啟了把數字轉化為撥號連結,在預設是情況下就是開啟！status-bar-style

<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />

控制狀態列顯示樣式  default（白色）black（黑色） black-translucent（灰色半透明）

link標籤apple-touch-icon

如果apple-mobile-web-app-capable設定為yes了，那麼在iPhone,iPad,iTouch的safari上可以使用添加到主屏按鈕將網站添加到主畫面上。

而通過設定相應apple-touch-icon標籤，則添加到主屏上的表徵圖就會使用我們指定的圖片。

以下是針對ox不同裝置，選擇一個最優icon。預設iphone的大小為60px，ipad為76px，retina屏乘以2倍。

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

ios7以前系統預設會對表徵圖添加特效（圓角及高光），如果不希望系統添加特效，則可以用apple-touch-icon-precomposed.png代替apple-touch-icon.png

表徵圖使用的優先順序如下：

如果沒有跟相應裝置推薦尺寸一致的表徵圖，那個會優先使用比推薦尺寸大，但最接近推薦尺寸的表徵圖。

如果沒有比推薦尺寸大的表徵圖，會優先選擇最接近推薦尺寸的表徵圖。

如些有多個表徵圖符合推薦尺寸，會優先選擇包含關鍵字precomposed的表徵圖。

如果未在地區指定用link標籤指定表徵圖，會自動搜尋網站根目錄下以apple-touch-icon為首碼的png表徵圖。

註：ios7不再為icon添加特效，ios7以前則預設為icon添加特效，除非icon有關鍵字-precomposed.png為尾碼。devicePixelRatio

window.devicePixelRatio是裝置上物理像素和裝置獨立像素(device-independent pixels (dips))的比例。
      公式表示就是：window.devicePixelRatio = 物理像素 / dips     

webapp meta和裝置像素比devicePixelRatio