【发布时间】:2010-11-10 06:06:11
【问题描述】:
我们已经为移动设备准备了一个备用版本的 out 网站。我们提供的内容不同,而且效果很好。
检测要投放哪个版本的最佳方法是什么。我们没有所有移动设备的列表,因此使用用户代理标头很棘手,因为我们可能会遗漏一些东西。
我们考虑过使用设备屏幕宽度 - 但是如果移动设备不支持 javascript 会发生什么。我们如何嗅探这个?
【问题讨论】:
标签: html redirect user-agent mobile-website
我们已经为移动设备准备了一个备用版本的 out 网站。我们提供的内容不同,而且效果很好。
检测要投放哪个版本的最佳方法是什么。我们没有所有移动设备的列表,因此使用用户代理标头很棘手,因为我们可能会遗漏一些东西。
我们考虑过使用设备屏幕宽度 - 但是如果移动设备不支持 javascript 会发生什么。我们如何嗅探这个?
【问题讨论】:
标签: html redirect user-agent mobile-website
这是可行的解决方案
RewriteEngine On
RewriteBase /
#http://stackoverflow.com/questions/3680463/mobile-redirect-using-htaccess
# Check if mobile=1 is set and set cookie 'mobile' equal to 1
RewriteCond %{QUERY_STRING} (^|&)mobile=1(&|$)
RewriteRule ^ - [CO=mobile:1:%{HTTP_HOST}]
# Check if mobile=0 is set and set cookie 'mobile' equal to 0
RewriteCond %{QUERY_STRING} (^|&)mobile=0(&|$)
RewriteRule ^ - [CO=mobile:0:%{HTTP_HOST}]
# cookie can't be set and read in the same request so check
RewriteCond %{QUERY_STRING} (^|&)mobile=0(&|$)
RewriteRule ^ - [S=1]
# Check if this looks like a mobile device
RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|ipad|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile" [NC,OR]
RewriteCond %{HTTP:Profile} !^$
RewriteCond %{QUERY_STRING} !^mobile=0(?:&|$)
# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST} !^m\.
# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP:Cookie} !\mobile=0(;|$)
# Now redirect to the mobile site
RewriteRule ^ http://m.yourdomain.com%{REQUEST_URI} [R,L]
# Go back to full site
RewriteCond %{HTTP_HOST} ^m\.
RewriteCond %{QUERY_STRING} (?:^|&)mobile=0(?:&|$)
RewriteRule ^ http://yourdomain.com%{REQUEST_URI} [R,L]
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [NC,L]
RewriteRule ^.*$ index.php [NC,L]
【讨论】:
如果您希望使用 JavaScript 重定向到移动网站,我注意到 WURFL 也有一个解决方案可以让您使用 JavaScript 进行服务器端检测。
<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>
您将得到一个如下所示的 JSON 对象:
{
"complete_device_name":"Apple iPhone 6",
"is_mobile":true,
"form_factor":"Smartphone"
}
然后你可以使用这个:
if (WURFL.is_mobile === true) {
window.location.replace("http://stackoverflow.com");
}
【讨论】:
【讨论】:
只要把它放在你的标题中:
<script type="text/javascript">
<!--
if (screen.width <= 700) {
window.location = "http://www.mobile-site.com";
}
//-->
</script>
几乎每个人的电脑屏幕都高于 700 像素的阈值,但这个值是可以更改的。那里没有超过 700 像素的手机或平板电脑(至少我不知道),因此所有移动设备都会重定向到您的移动网站。
【讨论】:
简单:
<link rel="alternate" media="handheld" href="WEBSITE HERE">
把它放在头部。
【讨论】:
handheld 媒体类型。他们希望显示网站的常规版本:这意味着您需要一些其他机制来检测移动浏览器。
如果设备不支持 JS,最好考虑使用 Server-side 解决方案,WURFL API 可以帮助实现这个方向。
有时我们想避免这种方法的问题(例如反向代理缓存页面并且不让重定向到移动版本)或者我们需要一个快速的解决方案,因为现在几乎所有最近的设备都支持 JS。
出于这个原因,我编写了一个名为“redirection_mobile.js”的 JS 脚本,它检测浏览器的用户代理并在您从移动设备访问时重定向到您网站的移动版本。
在某些情况下,您想从移动设备重定向到桌面版本(例如使用“转到主站点”链接),脚本会处理该问题,一旦您完成会话,您就可以访问又是手机版。
您可以在 github 上找到源代码 http://github.com/sebarmeli/JS-Redirection-Mobile-Site,您可以在此处阅读我的一篇文章中的更多详细信息:
【讨论】:
media="handheld" 不适用于现代智能手机,例如伪装成桌面浏览器的 iphone(使用屏幕媒体类型)。
http://detectmobilebrowser.com/ 免费和开源,有一个全面的移动用户代理检查器,支持多种语言 - javascript、php、asp.net、ruby 等。
【讨论】:
您可以使用设备描述数据库(例如WURFL),该数据库将根据请求标头识别客户端设备。然后,您可以查询该数据库以确定设备是否可以处理您的网站(例如,支持 javascript,或者屏幕是否足够大),然后再决定是否将它们重定向到其他网站。
您没有提及您的环境,但 WURFL 提供了用于 Java 和 PHP 的 API,也许还有其他的。如果没有提供 API,您仍然可以使用 WURFL,但您必须自己解析和处理 XML 数据。
【讨论】:
同意 Skaffman,另一个设备数据库是 DeviceAtlas。不过,您必须为此付费。
【讨论】:
我认为没有一种好的/优雅的方法来检测用户是否激活了他的 javascript。
IMO,最好列出用户代理:here 是一个 User-Agent 列表,看起来很完整(遗憾的是法语)。
【讨论】: