IOS 下webApp的啟動畫面設定
阿新 • • 發佈：2019-01-10
更有趣的是，我們還能設定我們的webApp的桌面圖示以及啟動畫面！
下面分別是iphone、ipod、ipad以及相應retina屏的圖示及啟動畫面設定~需要注意的地方是啟動畫面的圖片大小，在media屬性我們可以看到寬高的值，但是這是包括了狀態列的，所以其實圖片的真實大小的高度並不是media內的值而是href示例中的大小~
<!-- iPhone
-->
sizes="57x57"
rel="apple-touch-icon">
media="(device-width:
320px) and (device-height: 480px)
and
(-webkit-device-pixel-ratio: 1)"rel="apple-touch-startup-image">
<!-- iPhone
(Retina) -->
sizes="114x114"
rel="apple-touch-icon">
media="(device-width:
320px) and (device-height: 480px)
and
(-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPhone
5 -->
media="(device-width:
320px) and (device-height: 568px)and
(-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPad -->
sizes="72x72"
rel="apple-touch-icon">
media="(device-width:
768px) and (device-height: 1024px)
and
(orientation: portrait)
and
(-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
media="(device-width:
768px) and (device-height: 1024px)and
(orientation: landscape)
and
(-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iPad (Retina)
-->
sizes="144x144"
rel="apple-touch-icon">
media="(device-width:
768px) and (device-height: 1024px)
and
(orientation: portrait)
and
(-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
media="(device-width:
768px) and (device-height: 1024px)
and
(orientation: landscape)
and
(-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
|
另外iphone5這個特殊尺寸的啟動畫面的設定會稍有不同，它的寬度必須設定成device-width或者320.並且scale設定成1.0。
<!-- Letterboxed
on iPhone 5 -->
<meta name="viewport"
content="width=device-width">
<meta name="viewport"
content="width=320">
<!-- Not letterboxed
on iPhone 5 -->
<meta name="viewport"
content="initial-scale=1.0">
<meta name="viewport"
content="width=320.1">
|