画面サイズに合わせてサファリのアドレスバーとステータスバーを削除
<meta name="viewport" content="width=device-width,
initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">ホーム画面に追加するアイコンを設定する
apple-touch-icon 両方の apple-touch-icon-precomposedアイコンを設定できますが、余分なprecomposed アイコンは何を意味しますか? コードを作成しなくてもprecomposed 、角丸、影、反射などの特殊効果が、生成されたネイティブ アプリのロゴに自動的に追加されます。iOS 2.0 から始まりましたが、iOS 7 の登場により、今や無くてはならないものになりました。
<!-- 自定义各种尺寸图标 ,这里偷懒一下就用一张 -->
<link rel="apple-touch-icon-precomposed"
sizes="144x144" href="imgs/icon.png">
<link rel="apple-touch-icon-precomposed"
sizes="114x114" href="imgs/icon.png">
<link rel="apple-touch-icon-precomposed"
sizes="72x72" href="imgs/icon.png">
<link rel="apple-touch-icon-precomposed"
sizes="57x57" href="imgs/icon.png">起動ページの設定
現在、ios9では表示できず、具体的な原因はまだわかっていません。解決策をご存知の方、教えてください よろしくお願いします！
<!-- 添加启动页 ios9暂无法显示 -->
<!-- iPhone -->
<link href="imgs/splash-320x460.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="imgs/splash-640x920.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<link href="imgs/splash-640x1096.png"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 8 iPhone 6 (portrait) -->
<link href="imgs/splash-750x1294.png"
media="(device-width: 375px) and (device-height: 667px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 8 iPhone 6 (landscape) -->
<link href="imgs/splash-710x1334.jpg"
media="(device-width: 375px) and (device-height: 667px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image" >
<!-- iOS 8 iPhone 6 Plus (portrait) -->
<link href="imgs/splash-1242x2148.jpg"
media="(device-width: 414px) and (device-height: 736px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 3)"
rel="apple-touch-startup-image" >
<!-- iOS 8 iPhone 6 Plus (landscape) -->
<link href="imgs/splash-1182x2208.jpg"
media="(device-width: 414px) and (device-height: 736px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 3)"
rel="apple-touch-startup-image" >
<!-- iPad (portrait) -->
<link href="apple-touch-startup-image-768x1004.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="apple-touch-startup-image-748x1024.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<link href="apple-touch-startup-image-1536x2008.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) -->
<link href="apple-touch-startup-image-1496x2048.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">ホーム画面プロンプトに追加するポップアップ
ここではサードパーティのプラグインが使用されています: GitHub - cubiq/add-to-homescreen: Add to home screen call-out for mobile devices supports android and ios. 詳しい使い方は自分で調べてください。以下はiosでの簡単な使い方です。
<!-- 添加提示插件 -->
<link rel="stylesheet" type="text/css"
href="addToHomescreen/css/addtohomescreen.css">
<script src="addToHomescreen/js/addtohomescreen.js"></script>
<script>
<!-- 清除session,每次都弹出提示 -->
addToHomescreen.removeSession();
addToHomescreen();
</script>