我们已经为移动设备准备了一个备用版本的 out 网站。我们提供的内容不同,而且效果很好。
检测要服务的版本的最佳方法是什么。我们没有所有移动设备的列表,因此使用用户代理标头很棘手,因为我们可能会遗漏一些东西。
我们考虑过使用设备屏幕宽度——但是如果移动设备不支持 javascript 会发生什么。我们如何嗅探这个?
我们已经为移动设备准备了一个备用版本的 out 网站。我们提供的内容不同,而且效果很好。
检测要服务的版本的最佳方法是什么。我们没有所有移动设备的列表,因此使用用户代理标头很棘手,因为我们可能会遗漏一些东西。
我们考虑过使用设备屏幕宽度——但是如果移动设备不支持 javascript 会发生什么。我们如何嗅探这个?
您可以使用设备描述数据库(例如WURFL),它将从请求标头中识别客户端设备。然后,您可以查询该数据库以确定设备是否可以处理您的站点(例如,支持 javascript,或者屏幕是否足够大),然后再决定是否将它们重定向到不同的站点。
您没有提及您的环境,但 WURFL 提供了用于 Java 和 PHP 的 API,也许还提供其他 API。如果没有提供 API,您仍然可以使用 WURFL,但您必须自己解析和处理 XML 数据。
media="handheld" 不适用于现代智能手机,例如伪装成桌面浏览器的 iphone(使用屏幕媒体类型)。
http://detectmobilebrowser.com/ 免费和开源,有一个全面的移动用户代理检查器,可用于多种语言 - javascript、php、asp.net、ruby 等。
如果您希望使用 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");
}
我认为没有一种好的/优雅的方法来检测用户是否激活了他的 javascript。
IMO,最好是列出用户代理:这是一个 User-Agent 列表,看起来很完整(遗憾的是法语)。
只需将其放在您的标题中:
<script type="text/javascript">
<!--
if (screen.width <= 700) {
window.location = "http://www.mobile-site.com";
}
//-->
</script>
几乎每个人的电脑屏幕都在 700px 的阈值之上,但这个值是可以改变的。那里没有超过 700 像素的手机或平板电脑(至少我不知道),因此所有移动设备都会重定向到您的移动站点。
同意 Skaffman 的观点,另一个设备数据库是DeviceAtlas。不过,您必须为此付费。
简单的:
<link rel="alternate" media="handheld" href="WEBSITE HERE">
把它放在头部。
如果设备不支持 JS,最好考虑一个 Server-side 解决方案,WURFL API 可以帮助朝着这个方向发展。
有时我们想避免这种方法的问题(例如反向代理缓存页面并且不让重定向到移动版本),或者我们需要一个快速的解决方案,因为现在几乎所有最近的设备都支持 JS。
出于这个原因,我编写了一个名为“redirection_mobile.js”的 JS 脚本,它检测浏览器的用户代理并在您从移动设备访问它时重定向到您网站的移动版本。
在某些情况下,您想从移动设备重定向到桌面版本(例如使用“转到主站点”链接),脚本将处理该问题,一旦您完成会话,您将再次访问移动版本.
您可以在 github 上找到源代码http://github.com/sebarmeli/JS-Redirection-Mobile-Site并且您可以在我的一篇文章中阅读更多详细信息:
这是工作解决方案
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]