使用PHP和jQuery检测移动设备

我试图在我正在构建的网页上检测移动浏览器。桌面上的用户将看到粘性菜单，而移动设备上的用户则不会看到

但我有非常基本的技能，不能真正扩展到HTML和CSS之外，这使得我很难让它正常工作。我希望有人能指出我没有意识到的明显的错误

我正在使用51度PHP移动设备检测器

在我的主要web文件中，我遵循以下说明：使用jQuery将粘性菜单合并到页面中

因此，我只想在用户不在移动设备上的情况下，使用PHP mobile detector返回的值应用粘性菜单CSS更改

PHP部分：

<?php
session_start();
include_once('51Degrees/core/51Degrees.php');
include_once('51Degrees/core/51Degrees.usage.php');
?>

我敢打赌，这是我在这里错过的非常明显和愚蠢的事情，但由于我缺乏背景，这件事就不会发生在我身上。任何帮助都将不胜感激

编辑：

谢谢你的意见。在讨论了一些建议之后，我的主要问题似乎是在同一页面上将变量的值从PHP获取到jQuery中

var mobile=；，有问题；。该值不会传递到jQuery中。我在页面源代码中看到的是var mobile=；我尝试了各种不同的编写方法，以适应其他PHP方法

---

有人发现问题吗？

你可以很容易地做到这一点-

    <script type="text/javascript">
        if (screen.width <= 800) {
            //do whatever you want
        }
    </script>

---

您可以使用jquery检测移动设备

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

使用来自

PHP:

是最好的插件

该插件为html标记提供了许多有用的类，您可以在css或jquery中使用这些类。比如它的移动设备，或者触摸设备等等

jquery：

if($('html').hasClass('touch')){ /* forgot the exact name of the classes modernizr  gives the html tag. just look it up at your tag after you installed the plugin */
    // do something only in mobile
}

但在你的情况下，我肯定会建议你使用mediaquerys和css

因此，对于智能手机肖像使用：

对于智能手机横向使用：

对于平板电脑肖像使用：

对于平板电脑横向使用：

不要忘记在头部设置视口，可能类似于：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

你好，提摩太我喜欢手机。这是一个开源PHP类，您可以将其添加到应用程序中，然后像这样使用：

$detect = new Mobile_Detect;
$mobile = $detect->isMobile();
if($mobile)
    // Call mobile page template
else
    // Call desktop page template

---

您可以使用mobiledetect库 作为composer软件包安装 下载链接和更多信息

和一篇关于某个主题的文章

---

我希望您能找到解决方案

首先，搜索移动设备google是否是您的好友！这个网站提供了很多帮助检测手机的脚本——而且，你的问题可能更像是一个响应性设计问题，而不仅仅是检测手机。您希望显示粘性菜单，因为桌面上的空间比手机上的空间大。使用浏览器中的开发人员工具，您是否看到任何错误？var mobile设置为什么例如，它看起来像var mobile=；在php执行后在javascript中执行？@ioums感谢您的提示。是的，这正是它表现出来的样子，显然不是它应该的样子。由于某些原因，未注册整个位。我是不是遗漏了引号、标签或其他什么？谢谢，这看起来很有希望。不客气。如果有效，别忘了将其标记为正确答案！谢谢，我已经尝试过在jQuery版本中使用它了，但是它似乎没有多大作用。也许我以后的if语句有问题。我试过各种各样的表达方式：如果isMobile=true。。。如果isMobile=true。。。如果isMobile=false。。。如果jQuery.browser.mobile=true。。。等等，似乎没有什么不同；下面的脚本运行时就好像每次都满足了条件一样…re:PHP版本。。。因为我的粘滞菜单在jQuery中，所以我需要能够从jQuery脚本中访问$isMobile的值。我尝试过这个，但似乎不起作用：var mobile=；如果mobile=false{请注意您的运算符-ifisMobile=true正在将isMobile设置为true。如果isMobile==true正在检查isMobile是否为true，请注意双精度等于。我已更新了答案，以说明如何在Javascript中使用PHP变量-您需要将PHP用引号括起来，因为PHP正在将$isMobile设置为0或1，所以输出为var mobile=；or var mobile=1；因此，如果0且未使用引号var mobile=；或var mobile='1'，则会抛出错误；

<script>

    var mobile = '<?php echo ($isMobile); ?>';
    if (mobile == false) {
        console.log('FALSE');
    } else {
        console.log('TRUE');
    }

</script>

if($('html').hasClass('touch')){ /* forgot the exact name of the classes modernizr  gives the html tag. just look it up at your tag after you installed the plugin */
    // do something only in mobile
}

@media all and (max-width: 420px) {}

@media all and (max-width: 580px) {}

@media all and (max-width: 768px) {}

@media all and (max-width: 1024px) {}

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

$detect = new Mobile_Detect;
$mobile = $detect->isMobile();
if($mobile)
    // Call mobile page template
else
    // Call desktop page template