How to detect Android in JavaScript?

JavaScript/Hammer.js: How to detect Android pinch to zoom innerWidth?

  • I want to know the innerWith/viewport width of the pinch to zoom when it's zoomed. If it's below 500 px I want to change the image with: $("img#ad").attr("src", "http://img0.www.suckmypic.net/img/1/L/mmy4jT8s/jsFiddle3.png"); I've tried something like this: var hammer = new Hammer(document.getElementById("log")); hammer.ontransformstart = function(ev) { var pziW = "test"; // Declare here the innerWidth of the pinch to zoom if (pziW < 500) { $("img#ad").attr("src", "http://img0.www.suckmypic.net/img/1/L/mmy4jT8s/jsFiddle3.png"); } }; hammer.ontransform = function(ev) { var pziW = "test"; // Declare here the innerWidth of the pinch to zoom if (pziW < 500) { $("img#ad").attr("src", "http://img0.www.suckmypic.net/img/1/L/mmy4jT8s/jsFiddle3.png"); } }; hammer.ontransformend = function(ev) { var pziW = "test"; // Declare here the innerWidth of the pinch to zoom if (pziW < 500) { $("img#ad").attr("src", "http://img0.www.suckmypic.net/img/1/L/mmy4jT8s/jsFiddle3.png"); } }; But I don't know how to declare the innerWidth of the pinch to zoom. Here is the jsFiddle: http://jsfiddle.net/nLvu6/ Somebody has an answer?

  • Answer:

Luqmaan Dawoodjee at Quora Visit the source

Was this solution helpful to you?

Other answers

I wasn't doing anything for touch devices, but one of those solutions should work: Basing on js window property (http://www.w3schools.com/jsref/prop_win_innerheight.asp): ontransform (ev){ if (window.innerWidth < 500) { what to do when viewport is lower than 500 } } If first method won't work I'd try 2nd: From what I've read in Hammer documentation this point will be helpful for the problem: scale: The distance between two fingers since the start of an event as a multiplier of the initial distance. The initial value is 1.0. If less than 1.0 the gesture is pinch close to zoom out. If greater than 1.0 the gesture is pinch open to zoom in. on page start: set viewport-width variable to initial width ontransformstart:  zoom variable = ev.scale (it'll be 1.0) ontransform: calculate zoom delta  (zoom variable -= ev.scale) viewport-width += viewport width * zoom delta zoom variable = ev.scale now you can check current viewport width #edit: ontransform can be replaced with ontransformend if you'd want to detect width after pinch, not during. Then delta will be removed and:  viewport-width *= ev.scale I hope I helped.

Michał Kardyś

This isn’t exactly what you are looking for, but it may help: Check out the http://bl.ocks.org/redgeoff/raw/6be0295e6ebf18649966d48768398252/. This example has been tested on Android, iOS and Windows Phone.You can find the source code at https://gist.github.com/redgeoff/6be0295e6ebf18649966d48768398252.

Geoffrey Cox

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.