Html 将移动设备重定向到我网站的备用版本
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1118581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Redirect mobile devices to alternate version of my site
提问by 32423hjh32423
We've got an alternate version of out website ready for mobile devices. The content we serve is different and it works well.
我们已经为移动设备准备了一个备用版本的网站。我们提供的内容不同,而且效果很好。
What is the best way to detect which version to serve. We don't have a list of all mobile devices so to use the user-agent header is tricky as we may miss something.
检测要提供哪个版本的最佳方法是什么。我们没有所有移动设备的列表,因此使用用户代理标头很棘手,因为我们可能会遗漏一些东西。
We thought about useing device screen width - but what happens if the mobile device doesnt support javascript. How do we sniff this ?
我们考虑过使用设备屏幕宽度 - 但是如果移动设备不支持 javascript 会发生什么。我们如何嗅探这个?
回答by skaffman
You could use a device description database (such as WURFL) which will recognise the client device from the request headers. You can then query that database to decide if the device can handle your site (e.g. support javascript, or is the screen big enough) before deciding whether to redirect them to a different site.
您可以使用设备描述数据库(例如WURFL),该数据库将从请求标头中识别客户端设备。然后,您可以查询该数据库以确定设备是否可以处理您的站点(例如,支持 javascript,或者屏幕是否足够大),然后再决定是否将它们重定向到其他站点。
You don't mention your environment, but WURFL supplies APIs for Java and PHP, and maybe others as well. If there's no supplied API, you can still use WURFL, but you'll have to parse and process the XML data yourself.
您没有提到您的环境,但 WURFL 提供了适用于 Java 和 PHP 的 API,也许还有其他 API。如果没有提供 API,您仍然可以使用 WURFL,但您必须自己解析和处理 XML 数据。
回答by JohnB
media="handheld" doesn't work with modern smartphones like the iphone which pretend to be a desktop browser (uses the screen media type).
media="handheld" 不适用于现代智能手机,例如假装是桌面浏览器的 iphone(使用屏幕媒体类型)。
http://detectmobilebrowser.com/Free & open source, has a comprehensive mobile user-agent checker available in many languages - javascript, php, asp.net, ruby, etc.
http://detectmobilebrowser.com/免费和开源,有一个全面的移动用户代理检查器,支持多种语言 - javascript、php、asp.net、ruby 等。
回答by Elliot Fehr
If you are looking to redirect to a mobile site using JavaScript, I noticed that WURFL also has a solution for that will allow you to do server side detection with JavaScript.
如果您希望使用 JavaScript 重定向到移动站点,我注意到 WURFL 也有一个解决方案,可以让您使用 JavaScript 进行服务器端检测。
<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>
you will be left with a JSON object that looks like:
您将得到一个 JSON 对象,如下所示:
{
"complete_device_name":"Apple iPhone 6",
"is_mobile":true,
"form_factor":"Smartphone"
}
You can then use this:
然后你可以使用这个:
if (WURFL.is_mobile === true) {
window.location.replace("http://stackoverflow.com");
}
回答by Walker
Just put this in your header:
把它放在你的标题中:
<script type="text/javascript">
<!--
if (screen.width <= 700) {
window.location = "http://www.mobile-site.com";
}
//-->
</script>
Just about everyone's computer screens are above the threshhold of 700px but this vaule can be changed. There isnt a phone or tablet out there that is above 700px (at least I dont know of any) so all mobile divices will redirect to your mobile site.
几乎每个人的电脑屏幕都高于 700 像素的阈值,但这个值是可以改变的。没有超过 700 像素的手机或平板电脑(至少我不知道),因此所有移动设备都将重定向到您的移动网站。
回答by Sander Koedood
An alternative to WURFLis Mobile Detect, a PHP class for detecting:
WURFL的替代方案是Mobile Detect,这是一个用于检测的 PHP 类:
- Tablet
- Mobile
- iOs
- Android
- Browsers
- And much more
- 药片
- 移动的
- 操作系统
- 安卓
- 浏览器
- 以及更多
So in case WURFLdoesn't do what you need, you can always check this out.
因此,如果WURFL不能满足您的需求,您可以随时查看。
回答by Clement Herreman
回答by darasd
Agreeing with Skaffman, another device database is DeviceAtlas. You have to pay for this one though.
同意 Skaffman 的另一个设备数据库是DeviceAtlas。不过,你必须为此付费。
回答by yesminusno
Simple:
简单的:
<link rel="alternate" media="handheld" href="WEBSITE HERE">
put that in the head section.
把它放在头部部分。
回答by sebarmeli
If the device doesn't support JS, it's better to consider a Server-side solution, and WURFLAPI can help towards that direction.
如果设备不支持 JS,最好考虑服务器端解决方案,WURFLAPI 可以帮助朝这个方向发展。
Sometimes we want to avoid issue with this kind of approach (such as a reverse proxy caches pages and don't let redirect to the mobile version) or we need a quick solution knowing that nowadays almost all recent devices support JS.
有时我们想避免这种方法的问题(例如反向代理缓存页面并且不让重定向到移动版本)或者我们需要一个快速的解决方案,因为现在几乎所有最近的设备都支持 JS。
For this reason, I wrote a JS script called "redirection_mobile.js" that detects the User Agent of the browser and redirects to the mobile version of your site if you're accessing it from a mobile device.
出于这个原因,我编写了一个名为“redirection_mobile.js”的 JS 脚本,它检测浏览器的用户代理,并在您从移动设备访问它时重定向到您网站的移动版本。
In some case you want to redirect from a mobile device to a desktop version (like with a link "Go to the main site"), the script will handle that and once you finish your session, you'll access to the mobile version again.
在某些情况下,您想从移动设备重定向到桌面版本(例如带有“转到主站点”的链接),脚本将处理该问题,一旦您完成会话,您将再次访问移动版本.
You can find the source code on github here http://github.com/sebarmeli/JS-Redirection-Mobile-Siteand you can read more details in one of my article here:
您可以在http://github.com/sebarmeli/JS-Redirection-Mobile-Site 的github 上找到源代码,您可以在我的一篇文章中阅读更多详细信息:
回答by Akash Chaudhary
here is the working solution
这是工作解决方案
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]