【问题标题】:Redirect mobile devices to alternate version of my site将移动设备重定向到我网站的备用版本
【发布时间】:2010-11-10 06:06:11
【问题描述】:

我们已经为移动设备准备了一个备用版本的 out 网站。我们提供的内容不同,而且效果很好。

检测要投放哪个版本的最佳方法是什么。我们没有所有移动设备的列表,因此使用用户代理标头很棘手,因为我们可能会遗漏一些东西。

我们考虑过使用设备屏幕宽度 - 但是如果移动设备不支持 javascript 会发生什么。我们如何嗅探这个?

【问题讨论】:

    标签: html redirect user-agent mobile-website


    【解决方案1】:

    这是可行的解决方案

    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]
    

    【讨论】:

      【解决方案2】:

      如果您希望使用 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");
      }
      

      【讨论】:

        【解决方案3】:

        WURFL 的替代品是Mobile Detect,这是一个用于检测的 PHP 类:

        • 平板电脑
        • 手机
        • iOS
        • 安卓
        • 浏览器
        • 还有更多

        所以如果WURFL 没有满足您的需求,您可以随时查看。

        【讨论】:

          【解决方案4】:

          只要把它放在你的标题中:

          <script type="text/javascript">
           <!--
            if (screen.width <= 700) {
            window.location = "http://www.mobile-site.com";
            }
           //-->
          </script>
          

          几乎每个人的电脑屏幕都高于 700 像素的阈值,但这个值是可以更改的。那里没有超过 700 像素的手机或平板电脑(至少我不知道),因此所有移动设备都会重定向到您的移动网站。

          【讨论】:

          • 普通 ipad 的分辨率为 1024x768,ipad Retina 是其两倍。所以我会警惕依赖这个。
          • 截至 2015 年,此答案已过时。
          【解决方案5】:

          简单:

          <link rel="alternate" media="handheld" href="WEBSITE HERE">
          

          把它放在头部。

          【讨论】:

          • -1 iPhone/iPod Touch 和其他智能手机不支持handheld 媒体类型。他们希望显示网站的常规版本:这意味着您需要一些其他机制来检测移动浏览器。
          • 这不是一种检测方法,它是一种在语义上告诉浏览器在哪里可以找到移动网站的方法。
          • 但是 IMO,如果移动浏览器能够标准化尊重这样的标记,例如显示一个询问用户是否想要网站的移动版本并提供记住这一点的对话框,那肯定会很好选择。
          【解决方案6】:

          如果设备不支持 JS,最好考虑使用 Server-side 解决方案,WURFL API 可以帮助实现这个方向。

          有时我们想避免这种方法的问题(例如反向代理缓存页面并且不让重定向到移动版本)或者我们需要一个快速的解决方案,因为现在几乎所有最近的设备都支持 JS。

          出于这个原因,我编写了一个名为“redirection_mobile.js”的 JS 脚本,它检测浏览器的用户代理并在您从移动设备访问时重定向到您网站的移动版本。

          在某些情况下,您想从移动设备重定向到桌面版本(例如使用“转到主站点”链接),脚本会处理该问题,一旦您完成会话,您就可以访问又是手机版。

          您可以在 github 上找到源代码 http://github.com/sebarmeli/JS-Redirection-Mobile-Site,您可以在此处阅读我的一篇文章中的更多详细信息:

          http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/

          【讨论】:

            【解决方案7】:

            media="handheld" 不适用于现代智能手机,例如伪装成桌面浏览器的 iphone(使用屏幕媒体类型)。

            http://detectmobilebrowser.com/ 免费和开源,有一个全面的移动用户代理检查器,支持多种语言 - javascript、php、asp.net、ruby 等。

            【讨论】:

            • 首先重定向到detectmobilebrowser.com 对SEO 来说不是很糟糕吗?
            • 实际上你应该改变那部分代码,让它改为 firecoding.com ;-)
            • @FireCoding 这是我见过的最鬼鬼祟祟的评论 :)
            【解决方案8】:

            您可以使用设备描述数据库(例如WURFL),该数据库将根据请求标头识别客户端设备。然后,您可以查询该数据库以确定设备是否可以处理您的网站(例如,支持 javascript,或者屏幕是否足够大),然后再决定是否将它们重定向到其他网站。

            您没有提及您的环境,但 WURFL 提供了用于 Java 和 PHP 的 API,也许还有其他的。如果没有提供 API,您仍然可以使用 WURFL,但您必须自己解析和处理 XML 数据。

            【讨论】:

            • 不知道存在的东西。比我的解决方案好很多
            【解决方案9】:

            同意 Skaffman,另一个设备数据库是 DeviceAtlas。不过,您必须为此付费。

            【讨论】:

              【解决方案10】:

              我认为没有一种好的/优雅的方法来检测用户是否激活了他的 javascript。

              IMO,最好列出用户代理:here 是一个 User-Agent 列表,看起来很完整(遗憾的是法语)。

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 2023-03-03
                • 2014-01-31
                • 2012-12-17
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多