Windows 8 磁贴标签被忽略答案

【问题标题】：Windows 8 tile tags are being ignoredWindows 8 磁贴标签被忽略
【发布时间】：2013-01-16 15:23:33
【问题描述】：

我正在尝试使用以下代码为我的网站制作Windows 8 磁贴：

<meta name="application-name" content="Home | <?php echo bloginfo('name'); ?>" />
<meta name="msapplication-starturl" content="<?php echo bloginfo('url'); ?>" />
<meta name="msapplication-navbutton-color" content="#349ed5" />
<meta name="msapplication-tooltip" content="Tooltip Test" />
<meta name="msapplication-TileColor" content="#349ed5" />
<meta name="msapplication-TileImage" content="/logo_w144px.png" />

application-name、msapplication-starturl 和 msapplication-navbutton-color 属性工作正常，只需刷新页面即可更新 - 无需重新固定 - 但 msapplication-tootlip、msapplication-TileColor 和 msapplication-TileImage 正在完全忽略。

注意事项：

这是一个 WordPress 网站
IE 也忽略了此站点的图标
重启机器没有拉入镜像
我在另一台计算机上的 XAMPP 服务器上运行此站点，通过 IP 和端口号访问它
对于另一个本地站点，会选择网站图标，但会忽略相同的三个 msapplication 元标记，并将网站图标用作平铺图像

有谁知道出了什么问题以及我该如何解决？

[编辑]

我已尝试通过 Microsoft 的 buildmypinnedsite.com 代码生成器放置图像和设置，并使用它吐出的图像和代码，但这没有任何区别。

【问题讨论】：

标签： html windows-8 microsoft-metro xampp

【解决方案1】：

网站需要可以通过公共地址访问 - 它是 IP 还是域，不能是本地 IP 地址，如 localhost 或 127.0.0.1

【讨论】：

【解决方案2】：

这可能是问题所在：content="/logo_w144px.png" 。

它很可能找不到图像。尝试更改路径或为 jpg 添加回退。

content="logo_w144px.png"
content="../logo_w144px.png"
content="../img/logo_w144px.png"

...

【讨论】：

那行不通。我什至尝试通过 Microsoft 的 buildmypinnedsite.com 代码生成器放置图像和设置，但这没有任何区别。

【解决方案3】：

您确定您的 msapplication-TileImage 是 144x144 px .png image 吗？

您可以看到（来源“社区添加”部分）这是必须的，我也遇到了同样的问题，当我将我的 .png 大小 72x72 px 更改为 144x144 px 时问题已解决。

来源; Customizing the Site Icon (Windows)

【讨论】：

是的，绝对是 144x144 的 PNG 图片。

【解决方案4】：

我今天一直在尝试这样做，但发现如果您的网站在 HTTPS 下运行，图像将不会显示。

HTTP 工作正常...

我不敢相信我是唯一一个发现这一点的人，但我还没有在网上找到任何关于它的信息。

-- 编辑--

HTTPS 确实有效，但前提是您拥有完全受信任的证书 - 而不是自行生成的证书！

【讨论】：

好吧，我什至没有通过 HTTPS 尝试过——只有来自本地 XAMPP 服务器的 HTTP 和我们生产服务器上的测试文件。不过，感谢您提供的信息，我会记住的。

【解决方案5】：

我刚刚使用类似的设置遇到了这个问题。它最终是由在 <iframe> 上使用 appendChild（或 jQuery 中的 .wrap()）引起的。就我而言，这是因为我使用 FitVids.js。

Reported the bug here

磁贴标签在任何页面上都能正常工作，而无需在 JS 中使用 appendChild 修改 <iframe>。

【讨论】：

【解决方案6】：

我已经对这些东西做了一些试验，尽管是在客户预览版中，但发现它非常不可靠。几个关键点：

如果您有网站图标，that will always be chosen as the image
用于切片的缓存与浏览器缓存是分开的，并且似乎无法强制刷新，因此无论您是否看到可能在配置中进行的任何更新，都非常重要

【讨论】：

我从一开始就没有更改工具提示或 ImageColor 值 - 无论我重新固定或重新启动多少次，它们都从未被识别过。切片缓存必须具有不合理的持久性。不过感谢您提供的信息，我会看看我能做些什么来获得第二台 Windows 8 机器以进行更多测试。
@Ultrabenosaurus 我得到了通过物理关闭机器电源来更新的标题。请记住，在 Win8 上，“重启”实际上是 a suspend/restore by default。
标题一直对我有用，只需打开/刷新网页即可更新。
@Ultrabenosaurus 最初对我来说，当我在磁贴中获取网站图标时，我得到的是页面标题，而不是我在 meta 标签中指定的标题

【解决方案7】：

您如何确保使用平铺图像代替网站图标？

    <title>{$pageTitle}</title>

{* Favicon and Apple touch icon *}
<link rel="shortcut icon" href="{$THEME_URL}/favicon.ico" />
<link rel="apple-touch-icon" href="{$THEME_URL}/apple-touch-icon.png" />

{* Windows 8 tile *}
<meta name="application-name" content="{$siteTitle}"/> 
<meta name="msapplication-TileColor" content="#3380aa"/> 
<meta name="msapplication-TileImage" content="{$THEME_URL}/tile.png"/>

【讨论】：

请添加一些解释为什么此代码有助于 OP。这将有助于提供一个很好的答案。请参阅How to Answer 了解更多信息。