2017-10-07 94 views
1

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

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

$(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); 
     } 
    }); 
}); 

你能帮我吗?请记住,我希望获得关于制作移动重定向网址和桌面网址的一些帮助,但这两者都会导致相同的页面,但请使用不同的版本。

+0

为什么不用PHP来做到这一点?或使用CSS样板Bootstrap?主要关注移动首次开发。 –

+0

请参阅...而不是每个页面加载屏幕大小,您可以先设置会话名称,然后检查会话并重定向它... – GYaN

+0

而不是使用会话(这是最糟糕的想法)使用标题来获取操作系统的用户和其他详细信息,如设备名称,设备类型和手机重定向。 –

回答

0

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

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"; 
} 

另外,

您可以使用此检查user-agent标题

-

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

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

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

我希望这可以解决您的问题。

+0

说实话,你的代码工作,我看到但是我尝试了它,它每隔1秒钟不断重新加载页面,并没有显示任何东西。它的行为就像是一个永不停息的无限循环。显示控制台日志消息,但它意味着显示它是否正在工作。所以你的代码工作,但它加载页面repertley像一个无限循环。那么你有什么想法来解决这个问题吗? :D –

+0

但顺便说一下,这个问题,它有助于很多谢谢:D –