检测设备 JS 和切换类答案

【问题标题】：Detecting device JS and toggle class检测设备 JS 和切换类
【发布时间】：2018-02-09 22:13:42
【问题描述】：

我想检测设备的宽度和高度（响应式布局），所以如果返回为真，我想切换类“移动”，但我做错了，我不知道是什么。

$(function detectmob() {
    if(window.innerWidth <= 720 && window.innerHeight <= 1280) {
        return true;
    } else {
        return false;
    }
    if (return=true) {
        $(document).getElementByClass("box").addClass ('mobile');
    }
}

【问题讨论】：

这些都不需要；你应该在你的 CSS 文件中使用媒体查询。这是您要实现的代码：pastebin.com/bkYXEjPb
谢谢。现在可以了。

标签： javascript android jquery

【解决方案1】：

return 将在遇到时退出函数。您正在寻找一个与detectmob 隔离的变量，基于该变量可以添加一个类。

function detectmob() {
  var isMobile = false;

  if (window.innerWidth <= 720 && window.innerHeight <= 1280) {
    isMobile = true;
  }

  if (isMobile) {
    $(document).getElementByClass("box").addClass('mobile');
  }
}

但是如果你仍然想根据返回值进行检查，那么必须将逻辑提取到一个可以有返回值的函数中。

function detectmob() {
  var isMob = isMobile();

  if (isMob) {
    $(document).getElementByClass("box").addClass('mobile');
  }
}

function isMobile() {
  return window.innerWidth <= 720 && window.innerHeight <= 1280;
}

【讨论】：

【解决方案2】：

您应该使用用户代理而不是屏幕尺寸，否则具有巨大分辨率的移动设备将被检测为 PC（例如 Pixel 2 XL 具有 1440 x 2880 屏幕）。用户还可以将 PC 上的浏览器窗口大小调整为 700x1000，您的代码会将其检测为移动设备。

【讨论】：

这里是基于用户代理检测的小型js库github.com/kaimallea/isMobile

【解决方案3】：

您可以在此处添加类，而不是返回 true

【讨论】：