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

【问题标题】：How to prevent particular function from running on mobile devices如何防止特定功能在移动设备上运行
【发布时间】：2017-04-22 07:38:51
【问题描述】：

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

我的 javascript 代码：

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

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

【问题讨论】：

检查screen size .then 传递你的函数

标签： javascript mobile-website

【解决方案1】：

试试这个

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

低于425px的宽度是手机屏幕尺寸。所以动作只在425px以上执行

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

【讨论】：

“宽度低于 425 像素的手机” 嗯，可能。目前。关键不在于它是否是手机，而在于购物车是否对于屏幕来说太大了。

【解决方案2】：

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

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

我会使用 CSS 媒体查询来使购物车适合显示它的屏幕。或者如果屏幕太小，可以隐藏它。

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

【讨论】：