vue-cliでpwaの設定のやり方
iOSのステータスバーの色、もといステータスバーを消そうとして、設定の仕方がわからなかったメモ
通常の設定方法
metaタグに入れればおk
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
vue-cliの構築時にpwaを有効にした場合
プロジェクトルートにvue.config.js
を作成し、以下を記述
module.exports = { pwa: { themeColor: '#000000', msTileColor: '#000000', appleMobileWebAppCapable: 'yes', appleMobileWebAppStatusBarStyle: 'black' } };
cliにて構築している場合、metaタグを入れてあっても、上記の設定(してない場合はデフォルト値)が反映されてしまい、タグが反映しない模様
その他
apple-mobile-web-app-status-bar-style
にて、透過させるblack-translucent
オプションをした場合に上に白いバーが出てしまうのはノッチのせいらしい…
viewport
タグで位置を変えても上か下に残ってしまって、おとなしくblack
かwhite
を使うことにした。
以前はできたが、現在はピンチのズームも無効にできない模様。