I have written a small test page that detects and displays touch events using Javascript and HTML5 touch events. I want to test whether this actually works on a Windows Touch device. Unfortunately, I actually don’t have a touch enabled device so I’m using the Input Simulator that comes bundled with Surface 2.0 SDK to try to simulate these events. It doesn’t look like touch events are being raised in the browser (Firefox 6).
I have tried this using the TUIO plug-in by Fajran and using that to simulate touch events (so I know Firefox 6 definitely consumes these). So right now, I don’t know if these events are actually raised though in Windows 7 (I mean consumed by browsers to raise events).
Firefox said that it supported W7 Touch events in Firefox 4 onwards, but I have no idea if its still supported.
I’m still new so let me know if there’s something super obvious that I’ve missed or if there’s some more info I can provide. I looked through older posts and didn't see anything similar.
This question has been answered here: http://support.mozilla.com/en-US/questions/810808
Firefox 6 for Windows 7 still uses the old "MozTouch" events, while Firefox 6 for Android uses the standard "touchstart"/"touchmove" events.
Hope this is helpful.
Related
I noticed that in my angular app the property
window.navigator.pointerEnabled
returns true
Now, because I would like to do some testing which involves pointer-events inside a jsfiddle.net I noticed that these events are not present there. This probably has something to do with the fact that here the pointerEnabled property is undefined.
My question is, how is this property controlled, how can I enabled it?
If you're testing your code in Firefox, you need to configure the browser to enable pointer events, as they're not enabled by default at the moment (my current latest upgrade as of 2017.xi.15 is Firefox Quantum 57.0.2 (64-bit), what I post here may change in later versions!).
To do this, you have to launch a new tab, and type "about:config" in the address bar. Then, search for the entry:
dom.w3c_pointer_events.enabled
and change the status of this boolean value to true.
Unless you do this, Firefox won't, as yet, handle pointer events at all. This will probably change in the future, but for the moment, be aware that pointer event handling is likely to be a minefield if you're interested in cross-browser compatibility. For example, the latest version of Chrome running on my machine, namely Version 63.0.3239.84 (Official Build) (64-bit), handles pointer events without having to dive in and reconfigure the browser, but Firefox caused me no end of headaches until I discovered the above config issue, and similar woes are likely to appear on other browsers as well.
Just to compound the issue, the Windows version of Firefox allows you to enable pointer events, but they are not supported as yet at all on the Firefox Mobile for Android version of the browser. So the same browser is likely to behave differently when one changes platform, just to add to your coding nightmares.
I'm not familiar with Safari or Opera, but users of those browsers are strongly advised to check whether or not similar support issues apply when using pointer events!
As a consequence, it won't matter whether you're trying to handle pointer events natively, or via a framework such as Angular, if the browser doesn't enable pointer events from the get-go. I wasted several hours on this issue, and thought it would be a good idea to spare others the same frustration.
Of course, this will not solve the problem of your end users not knowing this, and your app failing on their systems when they try to run it without configuring their browsers to do so. Or, worse still, your app failing because their browsers don't support pointer events at all (e.g., Firefox Mobile for Android I cited above). End users expect apps to run out of the box, regardless of their hardware & browser choices, except that to make this happen, you currently have nasty hurdles to negotiate. One of these being that touch event support is also hidden behind a config flag in Firefox, so you can't even guarantee that falling back on separate touch events in case pointer events are not supported, will save your app from failure.
At the moment, the only major browser that maintains some consistency across platforms in this regard is Chrome. Code I've written using pointer events works both on a desktop machine and a tablet when I fire up Chrome, but I'm now aware that Firefox is going to present me with headaches on its own, when I try running the code on the tablet.
There are probably other issues lurking in addition to the above waiting for you (especially if you're using the new CSS pointer event features as well!) but they're properly reserved for elsewhere.
Pointer events offer a new way to handle mouse and touch events with one interface. Support for pointer events is currently still rather sparse. Currently, IE11 and Edge have direct support, IE10 with prefix. FF and Chrome (>=53) are actively developing it and have it hidden behind flags (See: chrome://flags/#enable-pointer-events ).
From Safari there are no public signals so far.
There is no way to activate or deactivate it for your users. Either a browser supports or it does not.
window.navigator.pointerEnabled is the deprecated way to check if the browser supports it. The recommended way is to check if window.PointerEvent is defined.
There is a polyfill, to support FF, CH, IE10 and Safari.
I have a metronome app that was working and is published to iTunes. When ios 9 came out, it broke my app. It also breaks on OSX after upgrading to 10.11.2 as well. I download Mac Chrome and the same code works fine. So it is broken in Webkit/Safari.
If I create a bufferSourceNode and then call start on the node, I receive the error 'invalidStateError DOM Exception 11'.
There are issues reported with ios and WebAudio in relating to the touchend / touchstart events. Apparently, Apple changed the API that it required the first event to be a touchend interaction. I'm not sure if this is what is breaking my code. I tried the workaround but to no avail ( WebAudio user-gesture restriction is no longer lifted by touchstart event : https://bugs.webkit.org/show_bug.cgi?id=149367).
Does anyone have any clues or workarounds as to this issue?
Thanks,
bruce
I discovered my problem was an issue in audioContextMonkeyPatch.js that I was using for iPhone.
The start() method takes 3 parameters and I was only passing 1 parameter to the method. iPhone 8 accepted that ok, however when upgrading to iPhone 9, the underlying Safari call failed because of the undefined parameter. I put a check into the shim codes and everything resolved.
This question already has answers here:
Reliable Way to Detect Desktop vs. Mobile Browser [duplicate]
(2 answers)
Closed 9 years ago.
Is there away to know if im running on a desktop or mobile device.
Since desktop responsiveness are diffrent i would like to know if a user can rotate te screen or not.
You can use a script to find your browsers user agent string. Each browser has a different user agent. Safari on Mac and Safari on an iPhone both also have different user agents.
I'm not exactly sure what you mean though, do you want like javascript to know what type of device your on?
I think you could use modernizr to detect the browser behavior.
Touch Events touch
The Modernizr.touch test only indicates if the browser supports touch events, which does not necessarily reflect a touchscreen device. For example, Palm Pre / WebOS (touch) phones do not support touch events and thus fail this test. Additionally, Chrome (desktop) used to lie about its support on this, but that has since been rectified. Modernizr also tests for Multitouch Support via a media query, which is how Firefox 4 exposes that for Windows 7 tablets. For more info, see the Modernizr touch tests.
It's recommended to set both touch and mouse events together, to cater for hybrid devices – see the Touch And Mouse HTML5 Rocks article.
The following will give you the user agent.
navigator.userAgent
You can then use something like:
if(navigator.userAgent.indexOf("DESIRED USER AGENT") != -1) {
// Mobile specific code
}
You should find the following thread helpful: Auto detect mobile browser (via user-agent?)
You can use Modernizr:
Modernizr creates an element, sets a specific style instruction on that element and then immediately tries to retrieve that setting. Web browsers that understand the instruction will return something sensible; browsers that don't understand it will return nothing or "undefined". Modernizr uses the result to assess whether that feature is supported by the web browser.
Eg:
if ( Modernizr.touch ) {
// mobile
} else {
// desktop
}
The following link has some javascript built-in functions to detect browsers :
http://www.quirksmode.org/js/detect.html
check out mobile detect. it may be a bit much for what you want but it is comprehensive.
The DeviceOrientation specification includes a Device Motion Event. I've seen it run on an iPhone, and heard it is supported in Chrome Mac and used on the Google Jules Vern Doodle.
Is it supported in any other browser implementation yet? What versions did it become available in?
Supporting DeviceOrientation or DeviceMotion is a combination of the browser and the hardware it's running on. Both Firefox and Chrome on windows support DeviceOrientation in terms of having the API, but won't necessarily work on any particular hardware. Firefox supports DeviceMotion, but Chrome on windows doesn't.
On a lenovo thinkpad with 'lenovo airbag protection' running, Firefox 10 will provide DeviceMotion events, but strangely won't provide DeviceOrientation events. Also, the values it provides seem to be wrong (i.e. not measured in m/s/s). vAnd while Chrome has the DeviceOrientation API, I haven't been able to get it to provide events. Opera 11.61 on windows doesn't seem to support either API. Safari 5.1.2 for windows doesn't seem to support either.
An excellent page on using the DeviceMotionEvent is here http://www.html5rocks.com/en/tutorials/device/orientation/ which includes a demo using DeviceOrientation and another demo using DeviceMotion.
Do anyone know how to improve response time of panning (using one finger gesture) handled using JavaScript in Safari on iPad/iPhone
Do you have a specific example of a web-site that is bad?
The user manual for the iPhone that is included with the standard bookmarks in Mobile Safari is implemented in Javascript and is almost as fluent as native code.
See:
what is the pastrykit framework - stackoverflow