La mejor manera de detener la función específica de JavaScript en dispositivos móviles

Question

Para mi proyecto actual, estoy usando el desplazamiento paralaje en el sitio web, y actualmente estoy desarrollando las versiones para móviles/tabletas del sitio.

En la actualidad, el desplazamiento paralaje no funciona bien en tabletas y teléfonos móviles debido a la diferencia en el evento de desplazamiento, por lo que quiero deshabilitar las llamadas javascript en mi archivo de scripts cuando se detecta un dispositivo móvil. Por el momento estoy haciendo esto usando

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

y luego disparando mi código de paralaje. Me pregunto si existe una forma mejor de hacerlo que apunte a dispositivos en lugar de a resolución, ya que soy consciente de que muchas de las pantallas en el mercado excederán 960 px de ancho.

La versión actual del sitio está disponible en http://beta.residencyradio.com si desea ver cómo funciona, ¡pero cualquier ayuda será apreciada!

Answer 1

Solución para detectar los dispositivos móviles

visitar la página web Detect Mobile Browsers. Hay una serie de scripts para diferentes idiomas, incluido JavaScript, que se pueden usar para incluir comportamientos diferentes cuando se detecta un navegador móvil.

Las secuencias de comandos, de forma predeterminada, simplemente cargarán otra URL si se detecta un navegador móvil. Está diseñado para cargar la versión móvil de su sitio web si se detecta un dispositivo móvil.

Sin embargo, con una ligera modificación, puede utilizar la secuencia de comandos para establecer un "indicador" que puede utilizar al determinar si desea realizar un comportamiento diferente, y aun así cargar el mismo sitio web para todos los dispositivos. He modificado el código de abajo con una entrada alert("mobile detected") marcador de posición a continuación:

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

Cerca del final de este guión, donde dice alert("mobile detected") que basta con sustituir con isMobile=true. Si el script detecta un navegador móvil, ese indicador se establecerá en verdadero.

Dejé la alerta allí para que pueda ejecutar la secuencia de comandos con diferentes dispositivos para ver la alerta.

factores de forma y diseño consejos

Ahora, quiero señalar que los factores de forma para móviles, tabletas y de escritorio son muy diferentes. Además, la forma en que los usuarios interactúan con estos 3 factores de forma también es drásticamente diferente. Esto puede significar que crear un sitio web para las 3 plataformas puede dañar la usabilidad y evitar que cree la mejor experiencia de usuario para las 3 plataformas.

En mi experiencia, los sitios web para móviles y tabletas que he disfrutado más se diseñaron específicamente para esos dispositivos. En otras palabras, no fueron solo sitios web existentes o aplicaciones web que alguien modificó en un intento de hacer que las cosas "se ajusten" a las plataformas de dispositivos móviles y tabletas. En cambio, las versiones para móviles y tabletas de esos sitios web con un alto grado de usabilidad se diseñaron desde cero, independientemente de la versión de escritorio, para que las actualizaciones, las correcciones de errores, los cambios de diseño, etc. a una plataforma para que los dos puedan divergir de forma independiente para adaptarse a los casos de uso para los usuarios en cada plataforma.

Por ejemplo, recientemente construí dos formularios web, uno está diseñado para navegadores de escritorio y el otro está diseñado para navegadores móviles. La versión de escritorio está en un archivo HTML y la versión móvil está en otro archivo HTML. La versión móvil usa jQuery Mobile, por lo que tiene funciones táctiles, de diapositivas y otras que hacen que interactuar con el sitio sea un placer para los dispositivos móviles. También se siente más como una aplicación móvil y se siente más "nativo". La versión de escritorio tiene más elementos de IU que implican clics del mouse o atajos de teclado, y se parece más a un sitio web que a una aplicación móvil.

Como no conozco los detalles exactos de su aplicación, por supuesto querrá echar un vistazo a lo que está haciendo y preguntarse si sería más fácil y más fácil de usar si creara un dispositivo móvil/versiones de tableta independientes de la versión de escritorio.

Answer 2

Yo sugeriría usar la prueba Modernizr.touch en este caso. Como dices, es común que los eventos táctiles solo se activen al completar un 'desplazamiento' en un dispositivo táctil.