摘要:嘗試制作響應式網站時，PM 提出需求想要可以讓網頁在被手機「新增至主螢幕」後，可以全屏開啟(無網址列且開啟為「網路應用程式」)。
嘗試制作響應式網站時，PM 提出需求想要可以讓網頁在被手機「新增至主螢幕」後，可以全屏開啟(無網址列且開啟為「網路應用程式」)。
所以我去查了些資料，得到以下的語法。終於試成功了。
這些語法只要加在網頁的Head區段就可以了
<!--iPhone 看普通網頁時會將屏幕像素闊度變成 980 像素，如果想將屏幕像素闊度變回原本大小-->
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" charset="utf-8"/>
<!--呈現在網頁名稱左方的小icon-->
<link rel="icon" href="http://edge.shop.com/ccimg.shop.com/resources/images/favicon.ico">
<!--用戶將網頁收藏為書並加到主畫面時，可以令最下的選單消失，令網頁變為全屏幕-->
<meta name="mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=yes">
<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="True">
<meta http-equiv="cleartype" content="on">
<!--用戶將網頁收藏為書並加到主畫面時，可加入自定義的 icon-->
<link rel="apple-touch-icon" href="http://edge.shop.com/ccimg.shop.com/resources/images/apple-touch-icon-196x196.png"/>
<link rel="apple-touch-icon" href="http://edge.shop.com/ccimg.shop.com/resources/images/apple-touch-icon-152x152.png"/>
<link rel="apple-touch-icon" href="http://edge.shop.com/ccimg.shop.com/resources/images/apple-touch-icon-120x120.png"/>
<link rel="apple-touch-icon" href="http://edge.shop.com/ccimg.shop.com/resources/images/apple-touch-icon-114x114.png"/>
<link rel="apple-touch-icon" href="http://edge.shop.com/ccimg.shop.com/resources/images/apple-touch-icon-76x76.png"/>
<link rel="apple-touch-icon" href="http://edge.shop.com/ccimg.shop.com/resources/images/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" href="http://edge.shop.com/ccimg.shop.com/resources/images/apple-touch-icon-60x60.png"/>
<link rel="apple-touch-icon" href="http://edge.shop.com/ccimg.shop.com/resources/images/apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon" href="http://edge.shop.com/ccimg.shop.com/resources/images/apple-touch-icon.png"/>
以下是apple 版的控制
<meta name="apple-mobile-web-app-capable" content="yes">
<!--用戶將網頁收藏為書並加到主畫面時，可以將最上的狀態列設定為其他顏色-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!--狀態列半透明-->
參考網址： Mobile Web 手機版網頁設計顯示問題
code部分是直接參考此購物網站的手機版
寫作 Mobile Web App 的準備