javascript - 基于UA的动态PHP内容条件加载

Question

我正在开发一个 WordPress 主题，它使用自定义 Walker 类来生成主导航菜单。主菜单有很多照片，你可以把它想象成类似UberMenu .

我显然不想在移动设备上加载所有这些图像，而只想一个基本的文本菜单(如果您愿意的话)。

我想根据 UA 和/或用户屏幕尺寸加载正确的菜单。在所有图像加载到浏览器之前，是否可以有条件地加载我想要使用的菜单(使用 javascript？)。我不想加载两个菜单，然后根据屏幕尺寸隐藏一个菜单，因为浏览器仍然需要加载后台的所有图像。

我正在考虑将 wp_nav_menu() 函数放在一个单独的 PHP 文件中，然后根据屏幕大小加载该 PHP，但我不确定这是否安全和/或高效或执行此操作的正确方法。如果有帮助的话我正在使用 Modernizr。

任何想法都值得赞赏

Answer 1

我认为检测用户代理并决定提供哪些内容最好在服务器端完成，但这是一场激烈的争论，双方都有各自的优点。

要使用 PHP 执行此操作，此代码带有 mobile detect library会完成工作:

<?php
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
if ( $detect->isMobile() || $detect->isTablet() ) {
    // mobile code
} else {
    // desktop code
}
?>

要使用前端代码来完成，可以转到 full responsive ，涉及 CSS 和媒体查询，或使用它来实现简单的条件逻辑:

if ( Modernizr.touch ) {
    // mobile code
} else {
    // desktop code
}