重定向特定网址,但仅限于移动设备或特定屏幕尺寸

时间:2015-05-14 02:06:08

标签: .htaccess url jquery-mobile redirect mobile

好的,这就是问题所在。我使用cms来运行电子商务网站。当用户在手机或ipad上时,它使用移动网站插件。我想重定向特定网址,但仅限于移动设备。我想保持桌面上的网址相同。

示例:

重定向/ desktop-categories / site.com/mobile-categories

如何执行此操作并指定仅在用户使用移动设备时重定向?

1 个答案:

答案 0 :(得分:1)

首先,您需要确定他们的浏览器是否是移动设备上的网络浏览器。由于移动电话通常具有较小的屏幕宽度,因此如果屏幕宽度小于或等于800像素,则可以将访问者重定向到移动网站。

  

Javascript window.location方法1

<script type="text/javascript">
  if (screen.width <= 800) {
    window.location = "http://m.domain.com";
  }
</script>

您可以使用.htaccess重定向根据浏览器支持的MIME类型传输访问者。例如,如果用户的浏览器接受包含WML(无线标记语言)的mime类型,则很可能是移动设备。

  

.htaccess网址重写重定向1

RewriteEngine On
# Check for mime types commonly accepted by mobile devices
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC]
RewriteCond %{REQUEST_URI} ^/$
RewriteRule ^ http://m.domain.com%{REQUEST_URI} [R,L]
  

按屏幕尺寸而非设备类型重定向移动用户2

var Responsive = {
    maxPhoneWidth: 775,
    maxTabletWidth: 925,

    //REDIRECT BASED ON CONFIGURABLE MAX WIDTH THRESHOLD
    maxWidthRedirect: function (maxWidth, url) {
        var viewport = this.getWindowSize();

        //ADD EXCLUSION IN HASH IN CASE DESKTOP VIEWING IS INTENDED
        if (window.location.hash != '#desktop' && viewport.width < maxWidth)
            window.location.href = url;
    },

    //REDIRECT BASED ON RECOMMENDED PHONE WIDTH THRESHOLD
    mobileRedirect: function (url) {
        this.maxWidthRedirect(this.maxPhoneWidth, url);
    },

    //REDIRECT BASED ON RECOMMENDED TABLET WIDTH THRESHOLD
    tabletRedirect: function (url) {
        this.maxWidthRedirect(this.maxTabletWidth, url);
    },

    //DETERMINE CROSS-BROWSER SCREEN SIZE
    getWindowSize: function () {
        var w = window,
            d = document,
            e = d.documentElement,
            g = d.getElementsByTagName('body')[0],
            x = w.innerWidth || e.clientWidth || g.clientWidth,
            y = w.innerHeight || e.clientHeight || g.clientHeight;

        return { width: x, height: y };
    }
};

You can see the code in action at the following link and trying different browser sizes.

<强>参考

  1. How to redirect your website to its mobile version

  2. Redirecting Mobile Users by Screen Size Instead of Device Type