如何消除添加到主屏幕的icon没有黑边

时间:2022-10-02 08:55:48


head里面增加下面这个就可以网页用safari浏览器打开的时候就可以添加到主屏幕了。

<link rel="apple-touch-icon" href="/web/static/webapp.png">

但是如果用png的话就会有黑边,和下面这样

如何消除添加到主屏幕的icon没有黑边


苹果在制作圆角icon样式,用了png就会这样,

经查我改成jpeg之后,没有透明度了,就好了。

<link rel="apple-touch-icon" href="/web/static/webapp.jpeg">

改正jpeg之后,添加到主屏幕就没有黑边了。也不会有白边,效果正好。

如何更像app

在head上增加这个标签,这样就不会显示地址拦了,会让H5应用更像app

<meta name="apple-mobile-web-app-capable" content="yes" />