Question

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

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

Answer 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;
}

Answer 2

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

Answer 3

而不是返回true，你可以在那里添加类

检测设备JS和切换类

3 个答案: