从移动网站解析 apple-touch-icon答案

【问题标题】：Parse apple-touch-icon from mobile websites从移动网站解析 apple-touch-icon
【发布时间】：2013-12-08 19:24:51
【问题描述】：

对于像 www.example.com 这样的给定网址，我想通过例如提取苹果触摸图标。在 dom 中搜索该属性：

<link rel="apple-touch-icon" href="touch-icon-iphone.png">

问题是 example.com 没有在普通网站上提供这个标签，只是在移动 m.example.com 网站上。我认为他们使用服务器端设备检测并仅在移动设备上添加此标签。关于如何在此类网站上获取此图标的任何想法？

【问题讨论】：

服务器端重定向可能是使用User-Agent HTTP 标头来检测 iOS 并转发到移动站点响应，如果您从前端执行此操作，您将无法出于安全原因，通过 XHR 设置该特定标头。您需要在后端设置代理服务来设置 User-Agent 标头，发出请求，然后将其返回给您的 JS 函数。

标签： javascript html dom mobile device-detection

【解决方案1】：

如果example.com 有m.example.com 移动版，他们可能使用User Agent sniffing 重定向手机用户。

网站的服务器基本上会查看您的请求的User-Agent HTTP 标头并将其与一组值进行匹配以检测移动浏览器。这是一个在 Apache 中如何完成的示例：

RewriteCond %{HTTP_HOST} ^(www\.)?example\.com$ [NC]
RewriteCond %{HTTP_USER_AGENT} (.*)iPhone(.*) [NC,OR]
RewriteRule ^ http://m.example.com [L,QSA]

好消息是您可以通过自己设置标头来欺骗服务器为您提供m.example.com。这是 curl 的示例：

curl facebook.com

curl facebook.com -L -A "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"

第一个将检索 facebook.com 的 HTML，第二个将 User-Agent 标头设置为 iPhone 的值。请注意，我们必须使用 -L 选项才能让 curl 跟随从 facebook.com 到 m.facebook.com 的重定向。

【讨论】：