apple-iconが画面いっぱいに表示されない #157
-
概要apple-iconが画面いっぱいに表示されず、以下のようになってしまう 関連イシュー |
Beta Was this translation helpful? Give feedback.
Replies: 6 comments 14 replies
-
|
ひょっとしたら、サイズは元のままで良くて、 https://note.com/nk2023/n/n345dca226533
|
Beta Was this translation helpful? Give feedback.
-
|
ちなみに自分も同じような表示でした！ |
Beta Was this translation helpful? Give feedback.
-
|
これたまに調べてますが、今のところわかってないです。 |
Beta Was this translation helpful? Give feedback.
-
|
#148 これをやっても解決しない理由 checkerで確認してみた
気になるところ
|
Beta Was this translation helpful? Give feedback.
-
|
あ、そもそも サイトのheadはこんな感じ： |
Beta Was this translation helpful? Give feedback.
-
|
まってください、根本的に apple-icon.png 私変更できてませんでした...泣 |
Beta Was this translation helpful? Give feedback.
-
マスキング設定
|
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
PWAの App Icon 作成でデザイナーが知ったこと ++ Gaji-Laboブログ この記事がわかりやすい...!? |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
自分のプロジェクトでmask-icon設定したらうまくいったので、manifest.json設定してみていいですか？ https://dev.to/progressier/why-a-pwa-app-icon-shouldnt-have-a-purpose-set-to-any-maskable-4c78 |
Beta Was this translation helpful? Give feedback.
-
|
ぜひぜひ！ |
Beta Was this translation helpful? Give feedback.
-
|
こちら色々さらに調査したのですが、おそらく解決策わかりました。 
mac の safari で確認してたんですが、favicon test のものは アルファチャンネルなしのもので、余白が取り除かれました。 
昨日投稿していた、mask-iconについては safari のファビコンでsvgを設定するもので ということで、画像変更のissueとプルリク作成します！ |
Beta Was this translation helpful? Give feedback.
-
|
あ、でも確かにmacのsafariは変わってますね！！ ありがとうございます！！👍 |
Beta Was this translation helpful? Give feedback.
-
|
iPhoneも、「ホームに追加」をすると正しい表示になっているので、 |
Beta Was this translation helpful? Give feedback.
-
|
iPadのsafariでも確認しましたが、領域いっぱいに広がっていました！ |
Beta Was this translation helpful? Give feedback.
-
|
反映確認しました✨ |
Beta Was this translation helpful? Give feedback.
-
|
おお！ ありがとうございます！！🙌 |
Beta Was this translation helpful? Give feedback.
こちら色々さらに調査したのですが、おそらく解決策わかりました。
apple-touch-iconで、「アルファチャンネルがはい」のものは、チェックしてみると周りに余白が表示されていました。
mac の safari で確認してたんですが、favicon test のものは アルファチャンネルなしのもので、余白が取り除かれました。
昨日投稿していた、mask-iconについては safari のファビコンでsvgを設定するもので
manifest.jsonのほうは、android 系での設定なので、必要なさそうでした。
お騒がせしました🙇♀️
ということで、画像変更のissueとプルリク作成します！