在移动设备上停止特定JavaScript功能的最佳方法 [英] Best way to stop specific JavaScript function on mobile devices

问题描述

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

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

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

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


if（$（window）.width（）> 960）{


，然后触发我的视差码。我想知道是否有一个更好的方法这样做的目标设备，而不是决议，因为我知道，市场上的很多屏幕将超过960px的宽度。

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.

您可以在 http://beta.residencyradio.com 上查看网站的最新版本

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

推荐答案

检测移动设备的解决方案

Solution to Detect Mobile Devices

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

Check out the Detect Mobile Browsers website. 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.

默认情况下，如果检测到移动浏览器，则只需加载其他网址即可。它被设计为在检测到移动设备时加载您的网站的移动版本。

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.

但是，稍作修改，您可以使用脚本设置一个标志，您可以在确定是否执行不同的行为时使用它，但仍然加载所有设备的相同网站。我使用警告（移动设备检测到）在下面修改了以下代码：

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:

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');

接近此脚本的末尾，它表示 alert ）只需用 isMobile = true 替换。如果脚本检测到移动浏览器，则该标志将设置为true。

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.

我在其中留下了警报，因此您可以使用不同的设备运行脚本来查看警报。

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

表单因素和设计提示

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

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.

根据我的经验，和我喜欢使用最多的平板电脑网站是专为这些设备而设计的。换句话说，他们不只是现有的网站或Web应用程序，有人修改，试图使事情适合移动和平板电脑平台。

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.

相反，具有高度可用性的网站的移动和平板电脑版本是从头开始设计的，独立于桌面版本，因此更新，错误修正，设计更改等，都可以只在一个平台上进行，因此两者可以独立分开，以适应每个平台上的用户的使用情况。

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.

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

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.

由于我不知道你的应用程序的细节，你当然想看看你在做什么，问自己如果你创建移动/平板电脑版本独立于桌面版本，它会更容易和更方便用户友好。

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.

这篇关于在移动设备上停止特定JavaScript功能的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！