html - Windows 8 磁贴不显示正确的图像。反而显示收藏夹图标

Question

我们将网页固定在 Windows 8 机器上，但它显示的图像似乎是收藏图标，而不是元数据/xml 文件中指定的图像。

我首先尝试将其添加到所有网页的头部部分:

<!--[if IE]>
<meta name="application-name" content="My App"/>
<meta name="msapplication-TileColor" content="#ffffff"/>
<meta name="msapplication-TileImage" content="http://mysite.somwhere.au/app/img/tile.png" />
<meta name="msapplication-square70x70logo" content="http://mysite.somwhere.au/app/img/tiny.png"/>
<meta name="msapplication-square150x150logo" content="http://mysite.somwhere.au/app/img/square.png"/>
<meta name="msapplication-wide310x150logo" content="http://mysite.somwhere.au/app/img/wide.png"/>
<meta name="msapplication-square310x310logo" content="http://mysite.somwhere.au/app/img/large.png"/>
<![endif]-->

由于某种原因，这不起作用。我可以成功导航到“内容”部分中所述的每张图片，并且图片显示良好。

然后我尝试了 xml，希望它能起作用。 我的 html head 部分看起来像这样:

<!--[if IE]>
<meta name="application-name" content="My App"/>
<meta name="msapplication-config" content="http://mysite.somewhere.au/app/browserconfig.xml" />
<![endif]-->

我知道如果我使用默认名称“browserconfig.xml”，则这里不需要 msapplication-config，但无论如何我认为 id 是显式的...

我的 xml 看起来像这样:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
   <tile>
     <square70x70logo src="http://mysite.somewhere.au/app/img/tiny.png"/>
     <square150x150logo src="http://mysite.somewhere.com.au/app/img/square.png"/>
     <wide310x150logo src="http://mysite.somewhere.au/app/img/wide.png"/>
     <square310x310logo src="http://mysite.somewhere.au/app/img/large.png"/>
     <TileColor>#ffffff</TileColor>
   </tile>
 </msapplication>
</browserconfig>

知道为什么显示收藏夹图标而我的图片没有吗？尝试取消固定和重新固定但没有运气。我用这个网站来帮助我:http://www.buildmypinnedsite.com/

提前致谢!

Answer 1

解决了。

当您使用 browserconfig.xml 方法时效果最佳。

将此添加到您的元数据中:

<meta name="msapplication-config" content="/app/browserconfig.xml" />

如果您之前为测试添加了图像，然后希望更改图像，windows 似乎会缓存它，而清除您的 windows 缓存对某些用户来说似乎令人沮丧，所以...

我在图像 url 的“?1”末尾添加了一个参数。这似乎向 Windows 暗示内容是动态的，因此会重新加载图像。我想你可以在它成功后将其删除......

我的 browserconfig.xml 现在看起来像这样:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/app/img/smalltile.png?1"/>
      <square150x150logo src="/app/img/mediumtile.png?1"/>
      <wide310x150logo src="/app/img/widetile.png?1"/>
      <square310x310logo src="/app/img/largetile.png?1"/>
      <TileColor>#ffffff</TileColor>
    </tile>
  </msapplication>
</browserconfig>

现在它完美运行了。感谢对此解决方案的反馈。

编辑:

经过严格的测试和挫折后，在使用相对路径时，它可以很好地重复运行。在我们的例子中，站点是(比如)www.myapp.com，但 java 网络服务器称为/app，所以 www.myapp.com/app 是根目录。

<meta name="msapplication-config" content="/app/browserconfig.xml" />

browserconfig中的src是相对于你正在查看的页面的!因此，最好在这里使用完整路径，以防他们固定页面/app/orders/index.jsp。所以 src 变成了

src="/app/img/myimage.png?2"

现在效果很好。