重定向特定的网址，但仅适用于移动设备或某些屏幕尺寸答案

【问题标题】：Redirect a specific url but only on mobile or certain screen sizes重定向特定的网址，但仅适用于移动设备或某些屏幕尺寸
【发布时间】：2015-05-14 10:34:52
【问题描述】：

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

示例：

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

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

【问题讨论】：

标签： .htaccess url jquery-mobile redirect mobile

【解决方案1】：

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

Javascript window.location方法1

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

您可以根据浏览器支持的 MIME 类型使用 .htaccess 重定向来转移访问者。例如，如果用户的浏览器接受包含 WML（无线标记语言）的 mime 类型，那么它很可能是移动设备。

.htaccess URL 重写重定向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.

参考文献

【讨论】：