為什麼這篇ios主畫面設計鄉民發文收入到精華區：因為在ios主畫面設計這個討論話題中，有許多相關的文章在討論，這篇最有參考價值！作者mofies (呦呦呦呦呦～)看板Web_Design標題Re: [問題] iphone 網頁設...
※ 引述《jimi1975 (張急米)》之銘言：
: 如題
: 小弟要做一個網站，希望可以讓iphone、ipad的使用者存在首頁
: 但是希望安裝的方式是像在 APP STORE安裝
: 只是目前查到的資料都是要在瀏覽器上面按加入
: 所以想問有沒有什麼語法是可以設計一個按鈕
: 讓USER可以在網頁直接安裝？
: 不知道這樣有沒有人懂？
: 就有點像是 cydia 的安裝方式
: 謝謝！
可以利用iOS的Safari內的將網頁加入到主畫面的功能
能設定icon跟啟動畫面
將以下的code放在HTML的head標籤裡
然後將所需要的圖片共11張放到對應的路徑
圖片尺寸分別如下
啟動畫面
iPhone 320x460
iPhone(Retina) 640x920
iPhone 5 640x1112
iPad Landscape 1024x748
iPad Landscape(Retina) 2048x1496
iPad Portrait 768x1004
iPad Portrait(Retina) 1536x2008
iCon尺寸
iPhone 57x57
iPhone(Retina) 114x114
iPad 72x72
iPad(Retina) 144x144
<title>Your Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<!-- 啟動畫面 -->
<!-- iPhone -->
<link href="images/apple-startup-iPhone.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="images/apple-startup-iPhone-RETINA.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<link href="images/apple-startup-iPhone-Tall-RETINA.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad Portrait -->
<link href="images/apple-startup-iPad-Portrait.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPad Landscape -->
<link href="images/apple-startup-iPad-Landscape.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iPad Portrait (Retina) -->
<link href="images/apple-startup-iPad-RETINA-Portrait.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad Landscape (Retina) -->
<link href="images/apple-startup-iPad-RETINA-Landscape.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<-- 主畫面iCon -->
<!-- iPhone icon -->
<link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
<!-- iPhone icon (Retina) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/[email protected]">
<!-- iPad icon -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/apple-touch-icon-ipad.png">
<!-- iPad icon (Retina) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/[email protected]">
--
(#‵皿′)f〒﹋叭﹋叭﹋
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.126.34.2
※ 編輯: mofies 來自: 59.126.34.2 (11/17 21:14)