无缝的移动重定向脚本

Question

I have developed a mobile version of an existing web site. 我已经开发了现有网站的移动版本。 I have added some JavaScript to the home page of the desktop version of the site to handle the redirect. 我已经在站点的桌面版本的主页上添加了一些JavaScript以处理重定向。 The code works on a mobile device except that a copy of the home page appears before the redirect. 该代码可在移动设备上工作，但主页的副本会在重定向之前出现。 Can anyone help with this or does anyone know how to make the JavaScript run before the page loads? 任何人都可以帮助解决这个问题，或者有人知道如何在页面加载之前运行JavaScript吗？ An example of the JavaScript code is below. 以下是JavaScript代码的示例。

Also, the site's desktop home page is in HTML and PHP is not an option. 此外，该网站的桌面主页使用HTML，并且不提供PHP。 We also don't want to do a permanent mobile redirect. 我们也不想进行永久的移动重定向。 We want users to be able to access the desktop version if they want. 我们希望用户能够根据需要访问桌面版本。

Code: 码：

<!doctype html>
<head>

<!--start JavaScript code-->
<script>
  if (screen.width < 500 ||
     navigator.userAgent.match(/Android/i) ||
     navigator.userAgent.match(/webOS/i) ||
     navigator.userAgent.match(/iPhone/i) ||
     navigator.userAgent.match(/iPod/i) ||
     navigator.userAgent.match(/BlackBerry/) ||
     navigator.appName("Chrome")) {
      window.location.replace("TexasLandBankMobile/default.html");

</script>
<!--end JavaScript code-->

<title>Test</title>
 </head>
<body>
<div id="container">
    This is not a mobile device <br/>
</div>
</div> 
</body>
</html>

Any help would be greatly appreciated. 任何帮助将不胜感激。

Answer 1

Why not use reactive design and don't send mobile users anywhere but your homepage? 为什么不使用反应性设计并且不将移动用户发送到您的主页以外的任何地方？

And unless you do the redirect on the server level (apache rewrite etc) you can't do what you ask. 并且除非您在服务器级别执行重定向（apache重写等），否则您将无法执行所要求的操作。

Answer 2

Your best bet would be to redirect the user before they even get to your page, that way the user doesn't have to wait for a bloated desktop version of the site to download. 最好的选择是在用户进入您的页面之前重定向用户，这样用户就不必等待网站的desktop肿桌面版本下载。

But for a workaround, you could try hiding both versions of the page and then set the desktop/mobile version of the site to visible. 但是，要解决此问题，您可以尝试隐藏页面的两个版本，然后将网站的桌面/移动版本设置为可见。

eg 例如

<script>

function isMobileDevice() {
    return screen.width < 500 ||
        navigator.userAgent.match(/Android/i) ||
        navigator.userAgent.match(/webOS/i) ||
        navigator.userAgent.match(/iPhone/i) ||
        navigator.userAgent.match(/iPod/i) ||
        navigator.userAgent.match(/BlackBerry/) ||
        navigator.appName("Chrome"));
}

if (isMobileDevice()) {
  window.location.replace("TexasLandBankMobile/default.html");
} else {
  // set container div to visible
  document.getElementById('container').style.visibility = 'visible'; 
}

</script>

无缝的移动重定向脚本

问题描述

2 个解决方案

解决方案1
0 2012-01-04 17:50:42

解决方案2
0 2012-01-05 14:34:40

无缝的移动重定向脚本

问题描述

2 个解决方案

解决方案1 0 2012-01-04 17:50:42

解决方案2 0 2012-01-05 14:34:40

解决方案1
0 2012-01-04 17:50:42

解决方案2
0 2012-01-05 14:34:40