Question

我需要帮助吗？我想让我的网站有桌面和移动版本。将样式设置为HTML元素的正确宽度的 CSS 编码很容易，但 URL 更难。我想知道的是如何制作一个 URL ，这会导致桌面上的主页，但在移动设备上，URL不同但它与桌面版本相同但在移动版本中。你知道是否有任何代码可以做到这一点，但没有私下预览它的任何错误。我不介意您的答案是使用PHP还是JavaScript等。

这是我尝试使用的代码。我不确定它是否有效。不能说它可能会这样做。

$(document).ready(function() {
    $(window).on("load resize", function() {
        if($(window).width() <= 950) {
            var mobile = window.location = "/mindex.php";
            console.log("The location is " + mobile);
        } else if($(window).width() > 950) {
            var desktop = window.location = "/index.php";
            console.log("The location is " + desktop);
        } else {
            var defaultPlace = "";
            console.log("Defualt location: " + defaultPlace);
        }
    });
});

你能帮帮我吗？请记住，我希望在制作移动重定向网址和桌面网址方面提供一些帮助，但这会导致同一页面，但请使用不同的版本。

Answer 1

您可以使用浏览器发送的用户代理标题来检查用户是移动用户还是桌面用户，并根据返回的值重定向。您可以使用此选项检查用户代理标头 -

var usrAgent = navigator.userAgent;

现在您知道了用户代理，检查返回的用户代理是否是移动的，并相应地重定向 -

function detectMobile() 
{
    if(usrAgent.match(/Mobile/i))
    {
        return "Mobile";
    }
}

var isMobile = detectMobile();

if(isMobile)
{
    window.location = "MOBILE_URL";
}
else
{
    window.location = "DESKTOP_URL";
}

<强>可替换地，

您可以使用html 链接标记根据用户设备宽度重定向到任意网页 -

<link rel="alternate" media="only screen and (max-width: 640px*)" href="MOBILE_URL_TO_REDIRECT">

*根据您的要求更改此宽度。 640px是移动设备的理想最大宽度。

我希望这能解决你的问题。

移动网址重定向和桌面网址重定向

1 个答案: