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

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

  

但在移动设备上，购物车在滑入时会覆盖大部分屏幕

所以它不是一个真正的移动设备，它是一个屏幕尺寸的东西。

我使用CSS媒体查询使购物车适合其正在显示的屏幕。或者如果屏幕太小而无法隐藏它。

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

Answer 2

试试这个

谷歌浏览器F12模式。你得到屏幕尺寸

425px宽度低于移动屏幕尺寸。所以操作仅执行425px以上

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