在移动设备上停止特定 JavaScript 功能的最佳方法

Best way to stop specific JavaScript function on mobile devices

提问by Michael

For my current project, I am using parallax scrolling on the website, and am currently developing the mobile/tablet versions of the site.

对于我当前的项目，我在网站上使用视差滚动，目前正在开发网站的移动/平板电脑版本。

At current, parallax scrolling doesn't work well on tablets and mobiles due to the difference in the scroll event, so I am wanting to disable the javascript calls in my scripts file when a mobile device is detected. At the moment I am doing this using

目前，由于滚动事件的不同，视差滚动在平板电脑和手机上效果不佳，因此我想在检测到移动设备时禁用脚本文件中的 javascript 调用。目前我正在使用

if ( $(window).width() > 960) {

if ( $(window).width() > 960) {

and then firing my parallax code. I am wondering if there is a better way of doing this that will target devices rather than resolution, as I am aware that a lot of the screens on the market will exceed 960px in width.

然后触发我的视差代码。我想知道是否有更好的方法来定位设备而不是分辨率，因为我知道市场上的很多屏幕的宽度都会超过 960 像素。

The current version of the site is available at http://beta.residencyradio.comif you want to see how it works, but any help at all would be appreciated!

如果您想了解该网站的当前版本，请访问http://beta.residencyradio.com，如果您想了解它是如何工作的，我们将不胜感激！

回答by jmort253

Solution to Detect Mobile Devices

检测移动设备的解决方案

Check out the Detect Mobile Browserswebsite. There are a series of scripts for different languages, including JavaScript, that can be used to include different behavior when a mobile browser is detected.

查看检测移动浏览器网站。有一系列针对不同语言（包括 JavaScript）的脚本，可用于在检测到移动浏览器时包含不同的行为。

The scripts, by default, will simply load another URL if a mobile browser is detected. It is designed to load the mobile version of your website if a mobile device is detected.

默认情况下，如果检测到移动浏览器，脚本将简单地加载另一个 URL。它旨在在检测到移动设备时加载您网站的移动版本。

However, with a slight modification, you can use the script to set a "flag" that you can use when determining whether to perform a different behavior, yet still load the same website for all devices. I modified the code below with an alert("mobile detected")placeholder entry below:

但是，稍加修改，您可以使用脚本设置一个“标志”，您可以在确定是否执行不同的行为时使用该标志，但仍然为所有设备加载相同的网站。我用下面的alert("mobile detected")占位符条目修改了下面的代码：

isMobile=false;(function(a,b){if(/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))alert("mobile detected")})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile');

Near the end of this script, where it says alert("mobile detected")just replace that with isMobile=true. If the script detects a mobile browser, that flag will be set to true.

在此脚本的结尾处，它说alert("mobile detected")只需将其替换为isMobile=true. 如果脚本检测到移动浏览器，则该标志将设置为 true。

I left the alert in there so you can run the script with different devices to see the alert.

我将警报留在那里，以便您可以使用不同的设备运行脚本以查看警报。

Form Factors and Design Tips

外形因素和设计技巧

Now, I do want to point out that the form factors for mobile, tablet, and desktop are vastly different. Additionally, the way users interact with these 3 form factors is also drastically different. This may mean that building one website for all 3 platforms may either harm usability and prevent you from creating the best user experience for all 3 platforms.

现在，我想指出的是，移动设备、平板电脑和桌面设备的外形因素大不相同。此外，用户与这 3 种外形的交互方式也大不相同。这可能意味着为所有 3 个平台构建一个网站可能会损害可用性并阻止您为所有 3 个平台创建最佳用户体验。

In my experience, the mobile and tablet websites that I've enjoyed using the most were designed specifically for those devices. In other words, they weren't just existing websites or Web applications that someone modified in an attempt to make things "fit" the mobile and tablet platforms.

根据我的经验，我最喜欢使用的移动和平板电脑网站是专门为这些设备设计的。换句话说，它们不仅仅是有人修改的现有网站或 Web 应用程序，以使其“适合”移动和平板电脑平台。

Instead, the mobile and tablet versions of those websites with a high degree of usability were designed, from the ground up, independent of the desktop version, so that updates, bugfixes, design changes, etc, could all be made just to one platform so the two could diverge independently to fit the use cases for users on each platform.

相反，那些具有高度可用性的网站的移动和平板电脑版本是从头开始设计的，独立于桌面版本，因此更新、错误修复、设计更改等都可以只针对一个平台进行两者可以独立发散，以适应每个平台上用户的用例。

For example, I recently built two Web forms, one is designed for desktop browsers and the other is designed for mobile browsers. The desktop version is in one HTML file and the mobile version is in another HTML file. The mobile version uses jQuery Mobile, so it has touch, slide, and other capabilities that make interacting with the site a pleasure on mobile devices. It also feels more like a mobile app and feels more "native". The desktop version has more UI elements that involve mouse-clicks or keyboard shortcuts, and looks more like a website than a mobile app.

例如，我最近构建了两个 Web 表单，一个是为桌面浏览器设计的，另一个是为移动浏览器设计的。桌面版在一个 HTML 文件中，而移动版在另一个 HTML 文件中。移动版本使用 jQuery Mobile，因此它具有触摸、滑动和其他功能，使在移动设备上与站点交互变得愉快。它也感觉更像是一个移动应用程序，感觉更“原生”。桌面版本有更多涉及鼠标点击或键盘快捷键的 UI 元素，看起来更像是一个网站而不是移动应用程序。

Since I don't know the exact details of your application, you'll of course want to take a look at what you're doing and ask yourself if it would be easier and more user friendly if you created mobile/tablet versions independent of the desktop version.

由于我不知道您的应用程序的确切细节，您当然想看看自己在做什么，然后问问自己，如果您创建独立于桌面版。

回答by joecritch

I would suggest using the Modernizr.touch test in this case. Like you say, it's common that touch events are only fired on the completion of a 'scroll' on a touch device.

在这种情况下，我建议使用 Modernizr.touch 测试。就像您说的那样，通常只有在触摸设备上的“滚动”完成时才会触发触摸事件。