如何使用 Joomla 和 Ajax 检测屏幕大小来调整我的导航

我想创建一个移动网站网站，我正在尝试让我的导航适应屏幕尺寸。导航的HTML结构将发生变化，我知道我可以使用CSS和@MEDIA调用。但是，它不适用于我的情况，因为我使用的是 ZURB 框架的基础，我需要更改元素，从 UL 到 DD 或 DL 等。

我环顾了几个来源，发现由于 PHP 在 AJAX 准备就绪之前首先加载，因此我无法让我的导航在移动设备上正确显示。

我需要一些方法来检测我的屏幕尺寸并将该值传达给我在 Joomla 中的 PHP 菜单生成函数。

我尝试了以下方法：

window.onload = function(){ 
var height = $(window).height();
var width = $(window).width();
 $.ajax({
    type: "POST",
    url: '',
    data: {
        "height": height,
        "width": width
    },
    success: function (data) {
    },
});
}

mod_menu示例：

<?php
   require_once('FirePHPCore/FirePHP.class.php');
   $firephp = FirePHP::getInstance(true);
   ob_start();
   $width = $_POST['width'];
   $firephp->group('Test Group');
   $firephp->log('Width');
   $firephp->log($width);
   $firephp->groupEnd();
?>
if ($width > 767) { 
?>
<!-- The class on the root UL tag was changed to match the Foundation nav style -->
<ul class="nav-bar<?php echo $params->get('class_sfx');?>"<?php
    $tag = '';
    if ($params->get('tag_id')!=NULL) {
        $tag = $params->get('tag_id').'';
        echo ' id="'.$tag.'"';
    }
?>>
<?php
foreach ($list as $i => &$item) :
    $id = '';
    if($item->id == $active_id)
    {
        $id = ' id="current"';
    }
    $class = '';
    if(in_array($item->id, $path))
    {
        $class .= 'current ';
    }
    if($item->deeper) {
        $class .= 'parent ';
    }
    $class = ' class="'.$class.'item'.$item->id.'"';
    echo '<li'.$id.$class.'>';
    // Render the menu item.
    switch ($item->type) :
        case 'separator':
        case 'url':
        case 'component':
            require JModuleHelper::getLayoutPath('mod_menu', 'default_'.$item->type);
            break;
        default:
            require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
            break;
    endswitch;
    // The next item is deeper.
    if ($item->deeper) {
        echo '<ul>';
    }
    // The next item is shallower.
    elseif ($item->shallower) {
        echo '</li>';
        echo str_repeat('</ul></li>', $item->level_diff);
    }
    // The next item is on the same level.
    else {
        echo '</li>';
    }
endforeach;
?></ul>
<?php } ?>

然后，我使用 if 条件检查屏幕宽度并选择导航类型。一个导航使用UL结构，另一个必须使用DL DD结构。

我使用 FirePHP 查看页面的加载方式，我的导航没有显示，因为 PHP 在 Ajax 准备就绪之前首先加载，所以我看不到我的导航。我需要我的PHP等到Ajax准备好或页面的一部分等待。我不知道从这里去哪里。

我正在查看Joomla MooTools，不确定我是否可以利用它来等待Ajax在页面加载之前加载。

我知道，有更简单的方法，比如在Joomla中制作一个全新的菜单项，或者在Joomla中隐藏东西来让它工作，但我想要一种更干净、更优雅的方式。

如果有人有任何代码示例。请发布。