如何在使用移动设备打开我的网页时禁用 javascript 中的某些功能？

Question

当使用移动设备打开我的网页时，如何禁用我的一些js脚本功能？如果它只在 css 上我可以做到，但有些按钮需要在 js 上有功能。这是我的内部 js 代码

var menuBtn = document.getElementById("menu")
var sideNav = document.getElementById("header")
var xBtn = document.getElementById("xBtn")
var slidePage = document.getElementById("main-page")

sideNav.style.right = "-250px";

menuBtn.onclick = function(){
    if(sideNav.style.right == "-250px"){
        sideNav.style.right = "0";
        menuBtn.style.display = "none";
        slidePage.style.left = "-9%";
    }
    else{
        sideNav.style.right = "-250px";
        menuBtn.style.display = "block";
    }
}

xBtn.onclick = function(){
        sideNav.style.right = "-250px";
        slidePage.style.left = "0";
        menuBtn.style.display = "block";
}

Answer 1

您可以使用此功能进行检测。

function isMobile(){
    return window.innerWidth <= 600;
}

编码愉快:)

Answer 2

您可以使用 matchMedia() 代替 javascript 来跟踪屏幕的宽度。如果屏幕宽度满足指定条件，则通过返回 false 来禁用指定功能。像这样：

if (window.matchMedia('(max-width: 767px)').matches) {
    function nameFunction() {
        return false;
    }
} else {}

Answer 3

您可以使用以下功能检测移动设备。

function isMobile(){
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
   (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
    return true;
}
    return false;
}

如何在使用移动设备打开我的网页时禁用 javascript 中的某些功能？

How to disable some function in javascript when mobile device is use to open my webpage?

html

javascript

responsive