Weather App works on desktop but not on mobile

1

Hi guys, does anyone know why my app doesn’t work on mobile devices / iPads? It seems to work fine on desktop but not on actual mobile device and is driving me crazy…

www.danieljuiche.com/proj/weather-app/index.html

2

what EXACTLY doesn’t work? CSS? the JS? the API?

have you tried to run the code in a cloud based/virtual mobile OS?

Opened on these platforms and browsers -

MS Windows 10 v. 1607
Microsoft Edge 38.14393.0.0
Mozilla Firefox 50.1.0

Mac OS X El Capitan v. 10.11.6
Safari v10.0.2 (11602.3.12.0.1)

Did not fire up the Ubuntu box to test, too lazy …

*note - the digital clock stopped working the m/s the page finished loading. Console logged some lag with your CSS.MAP and the GeoIP server lagged as well. My safari browser would no load the page directly when typed, but would load the link from here in FCC.

3

I’m not sure what exactly doesn’t work, the JS scripts don’t seem to run when I try to launch it from my iPhone.
Do you have a good recommendation for cloud based virtual mobile that I can use to test?

4

there are a LOT of test sites -

I ran this one to test -

http://mobiletest.me/iphone_5_emulator/?u=http://www.danieljuiche.com/proj/weather-app/index.html

5

I think I know the issue for this now. Currently I am using a conditional statement to test if the user is on a mobile device.

$(document).ready(function () {
	if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
		mobileDeviceHandler();
	}
	else {
		approximateLocation();
	}
});

It appears that the issue is that the device I was trying to test this on has a different navigator.userAgent than what I listed. Even though the device I am using is an “iPad” or “iPhone”, it might have had a different name. This means that it was running the approximateLocation function, which then tries to get geolocation data and is failing to do so. I’ll have to investigate further.

6

try here to start -