如何在移动设备上阻止 运行 的特定功能

Question

我有一个允许用户在线购买杂货的网站。当有人点击产品时，购物车会滑入以显示数量、价格和产品名称。这在桌面设备上运行良好，但在移动设备上，购物车滑入时会覆盖大部分屏幕。我想更改它，以便如果用户在移动设备上，购物车动画不会 运行。

我的javascript代码：

$(document.body).on('click', '.cartButton', function(){

    addToCart(); // function to add item to cart 
    openCart(); // function to run animation to slide cart in
}

Answer 1

but on mobile, the cart covers most of the screen when it slides in

所以它不是真正的移动设备，而是屏幕尺寸的设备。

我会使用 CSS 媒体查询来使购物车适合它所显示的屏幕。或者在屏幕太小的情况下将其隐藏。

但您可以通过 screen object 的 width 和 height 属性检查屏幕大小，并决定如何处理购物车。

Answer 2

试试这个

google chrome F12 模式。你得到屏幕尺寸

低于 425px 宽度的移动屏幕 size.so 操作仅在 425px

以上执行

 $(document.body).on('click', '.cartButton', function(){
    console.log($(this).width())
    if($(this).width() > 425){
        addToCart();
        openCart(); 
        }
    })