Firefox mobile navigator.maxTouchPoints is undefined - javascript

Regarding mobile device detection, various articles refer to using navigator.maxTouchPoints, including this MDN post :
Use Navigator.maxTouchPoints to detect if the user's device has a touchscreen.
This method works great on most browsers, except for Firefox mobile on Android & iOS. It does however work on Firefox Focus though.
I have created a fiddle to replicate the issue.
Is this a bug, or perhaps I'm doing something wrong..?

Related

JavaScript Differences between Mobile iOS and Android Safari/Chrome

I have been trying to google around for a few days to find some kind of answer, but is their a difference between how iOS mobile devices understand JavaScript, vs Android?
I currently have some code that works as expected on Android (Chrome/Edge), and on Windows (Chrome, Edge, IE 8). But once we get to iOS devices, it doesn't work as expected.
I also tried to see if I could find an emulator for iOS mobile, or just downloading the mobile Safari browser, but wasn't able to find one (that didn't have a cost related to it).
I found the issue, it was related to the selectors in the code not being completed - Chrome got it, but safari didn't.

Webpage breaks on mobile devices (aw, snap!)

I have a problem with the https://konfiguratorszkolen.pl/ webpage - it works fine on desktop, but breaks on mobile devices.
On mobile, it loads at first and everything looks fine, but after a 1-2sec it shows "aw, snap" error. I've checked it only with Chrome and Safari on iPhone, but I believe it's a general problem.
I've already checked the website on
https://search.google.com/test/mobile-friendly
and
https://developers.google.com/speed/pagespeed/insights/
and the result are alright (mobile performance would be better).
What might be the problem? How can I debug this issue on mobile (of course works fine on a desktop browser)?
Here is the repository (it's only a code look-in): https://github.com/KamilSobieraj/Konfigurator_szkolen
What you're looking for is called remote debugging and is available for firefox, chrome and there's even solutions to debug iOS safari from your computer (no Mac needed).

Polymer paper element not working in android phone

I am using polymer paper elements in my polymer app. Its looking great in all desktop browsers. I tried this demo in all browsers. It working nice in some android phones (samsung s4). But in some android phones, I could not see anything (Tested using chrome and default android browser on samsung gt i9070, Micromax A90). I tried to load URL of mentioned demo on android webview, It was not working in many phones (Micromax canvas A114).
I gone through browser compatibility page Which shows, It supports in chrome android. but not observed by me. Is this observed by others ?

'deviceorientation' in Firefox?

I'm working with 'deviceorientation' on my laptop and an example jsfiddle seems to work fine in Chrome but is not responding in Firefox. I think that line 15 of JS is not working somehow...
window.addEventListener('deviceorientation', devOrientHandler, false);
The MozOrientation version on line 18 doesn't seem to be picking up the slack
window.addEventListener('MozOrientation', mozDevOrientHandler, false);
Just updated Firefox. And no change. I've tried to test on a desktop and (unsurprisingly) the machine doesn't seem to have the necessary accelerometers/sensors so the fiddle doesn't work on any browser on that machine. I've been scouring questions, reading the w3c specs, the MDN support and I still can't get it.
Does anybody know if this is a Firefox issue? Did I mess up settings or something? Any help is much appreciated. Any ideas as to why that example jsfiddle isn't working on Firefox?
note: the example "green ball" in the MDN link above isn't working on FF either. First time asking a question on SO.
Thanks!
Edit: I should clarify that the jsfiddle is the best example I could find, and is NOT my code. I believe it was from HTML5rocks.com but I can't find that source.
Firefox does not, at this time of writing, expose DeviceOrientation events on any Desktop platform. Your event handler is not triggered in Firefox simply for the reason that the API is not enabled in their Desktop browser builds.
On the other hand, Chromium-based browsers have enabled DeviceOrientation events with some important caveats. Chromium-based browsers generally only return DeviceOrientation events consistently on Mac OS X due to the general availability of gyro + accelerometer hardware sensors that are available in Apple computers. Additionally, Chromium-based browsers report the event.alpha value as undefined due to no compass or magnetic sensors being available to compute that correctly.
The situation on mobile browsers is much better and is arguably the main target for this API. All major mobile browsers (Safari on iOS, Chrome/Opera/Firefox on Android) do support this event in its un-prefixed form i.e. window.addEventListener('deviceorientation', function(event) { /* ... */ }, false).

What is causing my images to not load initially in safari. All other browsers seem to work fine

I am currently using the 3d cardflip method on my website and it is working perfectly in Firefox, IE, as well as the IE downgrades I have for older browsers. My issue is arising from the fact that it seems that all Apple iOS devices and Safari will not load the images and information on the cards on the initial load of the page but only when a hard reload or a simple reload of the page is performed. I have tried everything I can think of to fix the issue and I have not been able to find any information regarding the issue either. Any help would be gladly appreciated! The page that is not working is http://www.paytonandsam.com/about_sam.html
Please test this website on Safari Version 5.1.5, 6.0.2,6.0.3 i.e. a higher version of Safari browser. Because now safari browser is faster and flexible than the older version.

Categories