"VIEW FULL SITE" 移动站点选项

Question

所以我正在开发一个网站的移动版本，目前，我从主站中提取移动站点的内容。

当我研究一些手机站点时，我注意到很多都有“查看完整站点”的链接。

现在我打算通过 .js 在主站的头标签中检测屏幕宽度等方式重定向移动访问者（不确定这是否是最好的方式，但对我来说是最简单的方式）（但也欢迎建议）。大概像这样：

if (screen.width<=XyZ||screen.height<=XyZ) //example iphone size lets say 320x480
window.location.replace("mobile site link here.")

我不确定这是最好的方法，但在虚拟测试中，它在iPhone、一些朋友的Droids和一个Blackberry上都能工作。但它确实有效。

无论如何，我的问题是，如果我在每个页面上都进行此检查...我怎么可能有一个“查看完整站点”的选项呢？

- somdow

---

欢迎来到SO。下次请省略所有的“ lol”、“need help”和问候语；前两个只会令人讨厌，最后一个是不必要的。而且我也喜欢Alots。 - Marcel Korpel

如果这些答案对您有帮助，请接受/投票，这样其他用户就可以很容易地找到解决方法，因为他们可能遇到相同的问题。 - neebz

Answer 1

使用 PHP 通过 $_SERVER['HTTP_USER_AGENT'] 来检测移动用户。 由于许多移动浏览器不支持 JavaScript，因此 JavaScript 检测可能不可靠。 “查看完整网站”将设置一个 cookie 以拒绝移动站点，并且这是可以检测到的。 使用 cookies 来跟踪您的用户偏好。

在骨架中

<?php

if (isset($_COOKIE['nomobile'])) {
  $style = "normal";
} else {

if (preg_match('/iPhone|(...etc...)/', $_SERVER['HTTP_USER_AGENT'])) {
   $style = "mobile";
} else {
   $style = "normal";
}

}

针对“查看完整网站”页面:

<a href="fullsite.php">Full Site</a>

fullsite.php

<?php
   setcookie('nomobile', 'true');
   header('Location: index.php');
?>

- Ming-Tang

Answer 2

首先，前往以下网址下载mobile_detect.php文件：

http://code.google.com/p/php-mobile-detect/

接下来，请按照页面上的说明，将 mobile_detect.php 上传到您的根目录中，在您的首页或主页中插入以下代码：

    <?php
    @include("Mobile_Detect.php");
    $detect = new Mobile_Detect();
    if ($detect->isMobile() && isset($_COOKIE['mobile']))
    {
    $detect = "false";
    }
    elseif ($detect->isMobile())
    {
    header("Location:http://www.yourmobiledirectory.com");
    }
    ?>

你会注意到上面的代码正在检查名为“mobile”的cookie，当移动设备被重定向到移动页面时，该cookie将被设置。要设置cookie，请在您的移动落地页上插入以下代码：

    <?php
    setcookie("mobile","m", time()+3600, "/");
    ?>

查看完整文章：http://www.squidoo.com/php-mobile-redirect

- Matt

Answer 3

这不是最好的方法，因为移动浏览器往往不支持JS。

您可以使用此函数：

function its_mobile_browser($user_agent = '')
{
    if (empty($user_agent))
    {
        $user_agent = $_SERVER['HTTP_USER_AGENT'];
        if (empty($user_agent)) return false;
    }

    if (stripos($user_agent, 'Explorer')!==false ||
        stripos($user_agent, 'Windows')!==false ||
        stripos($user_agent, 'Win NT')!==false ||
        stripos($user_agent, 'FireFox')!==false ||
        stripos($user_agent, 'linux')!==false ||
        stripos($user_agent, 'unix')!==false ||
        stripos($user_agent, 'Macintosh')!==false
    )
    {
        if (!(stripos($user_agent, 'Opera Mini')!==false
              || stripos($user_agent, 'WAP')!==false
              || stripos($user_agent, 'Mobile')!==false
              || stripos($user_agent, 'Symbian')!==false
              || stripos($user_agent, 'NetFront')!==false
              || stripos($user_agent, ' PPC')!==false
              || stripos($user_agent, 'iPhone')!==false
              || stripos($user_agent, 'Android')!==false
              || stripos($user_agent, 'Nokia')!==false
              || stripos($user_agent, 'Samsung')!==false
              || stripos($user_agent, 'SonyEricsson')!==false
              || stripos($user_agent, 'LG')!==false
              || stripos($user_agent, 'Obigo')!==false
              || stripos($user_agent, 'SEC-SGHX')!==false
              || stripos($user_agent, 'Fly')!==false
              || stripos($user_agent, 'MOT-')!==false
              || stripos($user_agent, 'Motorola')!==false
        )
        ) return false;
    }

    return true;
}

或者更好的东西，哈哈 :)

- OZ_

---

你最好使用更加强大的东西 :) - neebz

Answer 4

您可以在您的网站地址中添加一个查询字符串参数，例如?fullsite=true，并在您的if条件中包含以下内容>

var fullsite = getQueryString()["fullsite"];
if (fullsite != "true" && (screen.height <= xyz || screen.width <= abc)) //now redirect

你将需要以下函数访问查询字符串。我是从这里获取的 > JavaScript查询字符串

function getQueryString() {
  var result = {}, queryString = location.search.substring(1),
      re = /([^&=]+)=([^&]*)/g, m;

  while (m = re.exec(queryString)) {
    result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }

  return result;
}

在这个链接中，你可以得到 >

<a href="mysite.com?fullsite=true"> 显示完整网站 </a>

===========

请看一下CSS媒体查询。它可能需要改变一点你的设计架构，但非常有用。

- neebz

---

我之所以选择通过宽度/高度检测移动浏览器并进行重定向（我的主要关注点是iPhone和Droid类型的手机），是因为据我了解，用户代理不是100％可靠的，总是需要更新。但JavaScript也是如此，因为许多低端/较小的设备无法识别它们等等。然后有“什么也不做”，让浏览器通过媒体类型来处理，但一些高端手机会忽略它。这让我很困扰，因为这不是我的强项。我的问题是，你们能否友好地指导我一个好的教程？再次感谢大家。 - somdow

Answer 5

服务器端检测绝对是这样做的方式，因为您无法保证JS可用或已启用。一个很棒的PHP脚本用于移动设备检测可以在这里找到 http://detectmobilebrowsers.mobi/ ，它在网络上得到了广泛的应用。

- ampersand