关于ios

5、iOS 设备

<code class="hljs haskell has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><meta name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"apple-mobile-web-app-title"</span> content=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"标题"</span>>添加到主屏后的标题（iOS <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span> 新增）
<meta name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"apple-mobile-web-app-capable"</span> content=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"yes"</span> />是否启用 <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">WebApp</span> 全屏模式
<meta name=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"apple-mobile-web-app-status-bar-style"</span> content=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"black-translucent"</span> />设置状态栏的背景颜色
    只有在 <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"apple-mobile-web-app-capable"</span> content=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"yes"</span> 时生效
    content 参数：
    <span class="hljs-default" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">default</span> 默认值。</span>
    black 状态栏背景是黑色。
    black-translucent 状态栏背景是黑色半透明。
    设置为 <span class="hljs-default" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">default</span> 或 black ,网页内容从状态栏底部开始。</span>
    设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

6、iOS 图标 rel 参数

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">apple<span class="hljs-attribute" style="box-sizing: border-box;">-touch</span><span class="hljs-attribute" style="box-sizing: border-box;">-icon</span> 图片自动处理成圆角和高光等效果。
apple<span class="hljs-attribute" style="box-sizing: border-box;">-touch</span><span class="hljs-attribute" style="box-sizing: border-box;">-icon</span><span class="hljs-attribute" style="box-sizing: border-box;">-precomposed</span> 禁止系统自动添加效果，直接显示设计原图。
<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">link</span> rel<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"apple-touch-icon-precomposed"</span> href<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/apple-touch-icon-57x57-precomposed.png"</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">/</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>iPhone 和 iTouch，默认 <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">57</span>x57 像素，必须有
<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">link</span> rel<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"apple-touch-icon-precomposed"</span> sizes<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"72x72"</span> href<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/apple-touch-icon-72x72-precomposed.png"</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">/</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>iPad，<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">72</span>x72 像素，可以没有，但推荐有
<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">link</span> rel<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"apple-touch-icon-precomposed"</span> sizes<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"114x114"</span> href<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/apple-touch-icon-114x114-precomposed.png"</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">/</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>Retina iPhone 和 Retina iTouch，<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">114</span>x114 像素，可以没有，但推荐有
<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">link</span> rel<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"apple-touch-icon-precomposed"</span> sizes<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"144x144"</span> href<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/apple-touch-icon-144x144-precomposed.png"</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">/</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>Retina iPad，<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">144</span>x144 像素，可以没有，推荐大家使用
<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>meta name<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"apple-mobile-web-app-title"</span> content<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"标题"</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>title最好限制在六个中文长度内，超长的内容会被隐藏，添加到主屏后的标题（iOS <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span> 新增）</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

7、iOS 启动画面

<code class="hljs xml has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">iPad 的启动画面是不包括状态栏区域的。
iPad 竖屏 768 x 1004（标准分辨率）
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">link</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">rel</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"apple-touch-startup-image"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">sizes</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"768x1004"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"/splash-screen-768x1004.png"</span> /></span>iPad 竖屏 1536x2008（Retina）
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">link</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">rel</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"apple-touch-startup-image"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">sizes</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1536x2008"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"/splash-screen-1536x2008.png"</span> /></span>iPad 横屏 1024x748（标准分辨率）
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">link</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">rel</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"apple-touch-startup-image"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">sizes</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1024x748"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"/Default-Portrait-1024x748.png"</span> /></span>iPad 横屏 2048x1496（Retina）
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">link</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">rel</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"apple-touch-startup-image"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">sizes</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"2048x1496"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"/splash-screen-2048x1496.png"</span> /></span>
iPhone 和 iPod touch 的启动画面是包含状态栏区域的。
iPhone/iPod Touch 竖屏 320x480 (标准分辨率)
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">link</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">rel</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"apple-touch-startup-image"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"/splash-screen-320x480.png"</span> /></span>iPhone/iPod Touch 竖屏 640x960 (Retina)
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">link</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">rel</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"apple-touch-startup-image"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">sizes</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"640x960"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"/splash-screen-640x960.png"</span> /></span>iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">link</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">rel</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"apple-touch-startup-image"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">sizes</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"640x1136"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"/splash-screen-640x1136.png"</span> /></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">link</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">rel</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"apple-touch-startup-image"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Startup.png"</span> /></span>  当用户点击主屏图标打开 WebApp 时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>