web-dev-qa-db-ja.com

スプラッシュ画面のプログレッシブウェブアプリのアイコンが非常に小さい

サイトのPWAを正常に作成しましたが、ホーム画面に追加してアプリを開いた後、スプラッシュ画面のアイコンが非常に小さいままです。

私のマニフェストには192x192と512x512の両方のアイコンがありますが、ここから読んだように（ https://developers.google.com/web/updates/2015/10/splashscreen ）、表示するには128dpに近づきます。 A2HSバナーではマニフェストに192x192が必要ですが、それはスプラッシュ画面アイコンが常に非常に小さいことを意味しますか？スプラッシュ画面のアイコンを大きくする方法はありませんか？

ありがとう！

androidgoogle-chromesplash-screenprogressive-web-apps
8
daitienshi

TL; DR：192x192アイコンを削除すると、スプラッシュ画面はデフォルトで512x512アイコンになります。

これをチェックしてください アイコンサイズの監査に関する問題 GoogleでChrome灯台の問題は以下を提供します：

...スプラッシュ画面には2つのレイアウトがあります。指定したアイコンが80dp未満の場合、「小さなアイコンレイアウト」が表示されます。 80 dpを超えると、「大きなアイコンレイアウト」が表示されます。スプラッシュスクリーンの理想的なサイズは128dpです。 （提供されていないアイコンを使用する方法もありますが、それが何であるかは不明です。）

manifest.jsonに192x192のアイコンがある場合、512x512のアイコンは使用されないようです。これに関するいくつかの議論については、上記のリンクのコメントを確認してください-それは未解決の問題のままです。

PWAでも同じ問題が発生し、192x192の画像を削除して512x512を残してテストしたところ、スプラッシュ画面のアイコンが大きくなりました。 1024x1024にして、次のビルドで512x512を削除してみようと思います。

EDIT：1024x1024を試してみたところ、dpに応じてレイアウトが2つしかないことを確認しました。 1024x1024は表示されず、スプラッシュ画面はデフォルトで384x384の小さい画面になりました。

3
nclarx

デフォルトでreactアプリを作成する場合、512x512 192x192このプロパティはmanifast.jsonアイコンサイズにないため、Webアプリアイコンはモバイル/デスクトップ/タブレットなどのスプラッシュ画面で変更されます。manifest.json need次の方法で構成するには、reactプロジェクトを開発している場合、manifest.jsonファイルはpublic/manifest.jsonディレクトリにあります。

{
  "short_name": "thefarmerson",
  "name": "This is official page of Karthikeyan Anbazhagan Indian Computer Science Engineer",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": " 512x512 192x192 64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}
0
KARTHIKEYAN.A

次の要件を満たしている場合、税関画面が自動的に表示されます。

推奨事項

Chrome for Androidは、ウェブアプリマニフェストで次の要件を満たしている限り、カスタムスプラッシュ画面を自動的に表示します。

  • nameプロパティは、PWAの名前に設定されます。
  • background_colorプロパティは有効なCSSカラー値に設定されています。
  • icons配列は、少なくとも512px x 512pxのアイコンを指定します。
  • アイコンが存在し、[〜＃〜] png [〜＃〜]です。

そのため、今回は512png画像が使用されているかどうかを確認してください。

0
noogui