1

所以我根据三种场景构建了一堆需要加载的脚本：

  1. 桌面
  2. 移动的
  3. 移动端完整站点（移动端桌面版）

我有一个 yepnope 函数，它测试移动浏览器（使用http://detectmobilebrowsers.com/），如果为 true，则加载 jQuery Mobile 和其他一些脚本文件，如果为 false，则加载特定的非移动脚本文件。但是，我注意到它强制将这些文件加载​​到 Modernizr 之上，这意味着它在 jQuery 之前加载。

如果用户想要查看桌面版本，我还有一个只能从移动设备设置的 cookie。如果设置了 cookie，它会忽略上面的脚本。

所以基本上我只是很难找出实现这些条件的最佳方法。

  • 所有版本都需要 jQuery、各种库和一个主脚本文件。

  • 桌面版本（和移动完整站点）还需要 jQuery UI 和非移动脚本文件。

  • 移动版本需要 jQuery Mobile 但不需要 jQuery UI 以及一些额外的库和另一个特定的移动脚本文件。

我想我应该先检查一下jQuery.browser.mobile，如果是真的检查 cookie。问题是我在脚本条件中插入 PHP 语句时遇到问题。它看起来像这样：

if(jQuery.browser.mobile) {

    if(<?php if($_POST['dontDoMob']) { return true; } ?>) {
        // Mobile full site scripts
    } else {
        // Mobile scripts
    }

} else {
    // Desktop scripts
}

我还想上面的脚本必须作为 yepnope 加载 jQuery 的完整功能运行。

谁能给我一个关于这种情况的正确技术的想法？

作为一个附带问题，将 jQuery Mobile 和 jQuery UI 一起加载真的很糟糕吗？前者是否意味着在移动平台上（以某种方式）复制后者？加载 jQuery UI 只是浪费时间吗？

更新（见下面的评论）：

我决定使用以下技术来检测四种类型的设备/设备状态；桌面、手机、平板电脑和手机上的桌面网站 (phonefull)。使用出色的Mobile Detect 类。 

require_once 'Mobile_Detect.php';

$detect    = new Mobile_Detect;
$desktop   = false;
$phone     = false;
$tablet    = false;
$phonefull = false;
$class     = '';

if( $detect->isMobile() && !$detect->isTablet() ) {
    if($_COOKIE['dontDoMob']) {
        $phonefull = true;
        $class = 'phonefull';
    } else {
        $phone = true;
        $class = 'phone';
    }
} else if( $detect->isTablet() ) {
    $tablet = true;
    $class = 'tablet';
} else {
    $desktop = true;
    $class = 'desktop';
}

?>

该class变量被回显到<body>标签中，以便在 CSS 和 JavaScript 中使用。

然后要使用设备变量，只需执行普通的 PHP if 语句：

<link rel="stylesheet" href="css/main.css">
<?php if($phone) { ?>
<link rel="stylesheet" href="css/mobile.css">
<?php } ?>
4

0 回答 0